2

我的网页中的绝对定位有问题：

我想相对于其父按钮定位一个按钮，这就是我所做的：

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 0px;
  left: 0px;
}

.button {
  height: 55px;
  width: 180px;
  background-color: transparent;
  border-color: transparent;
  background: url(Button.png);
  background-size: 100% auto;
  background-repeat: no-repeat;
}
<div class="parent" align="middle">
  <img src="http://via.placeholder.com/1900" width="1900px" />
  <div class="child">
    <button class="button">Button</button>
  </div>
</div>

此代码使按钮具有相对于窗口的位置，而不是它应该在的图像，所以当我缩小或按钮在图像内部移动时，而不是具有相同的相对位置。

4

2 回答 2

2

我想这就是你想要实现的

这是解决方案to your problem..。

下面是更新的CSS：

   .parent {
        position: relative;
   }
   .child{
        position: absolute;
        top: 0px;
        left:0px;
   }
   .button {
       height: 55px;
       width: 180px;

       background-size: 100% auto;
       background-repeat: no-repeat;
   }
于 2013-09-12T14:58:20.600 回答
0

似乎定位没有按您希望的方式工作。而且由于您只希望图像居中，因此我执行了以下操作。我从父级中删除了位置并将图像上的位置更改为相对位置。然后我将按钮相对于图像定位。尝试这个：

HTML

<div class="parent">
    <img src="background.png" width="400px" />
    <div class="child">
        <button class="button"></button>
    </div>
</div>

CSS

.parent {
    text-align:center;
}
.child {
    position: relative;
}
.button {
    height: 55px;
    width: 180px;
    background-color: transparent;
    border-color:transparent;
    background: url(Button.png);
    background-size: 100% auto;
    background-repeat: no-repeat;
    position:absolute;
}

JSFiddle

于 2013-09-12T15:00:27.277 回答