Question

我在div中有一个按钮。 div父级的位置为absolute，位于浏览器窗口的左侧。子按钮的位置是固定的，因为我希望子按钮始终与浏览器窗口的底部保持一定距离（无论父div是什么）。

我想要的是在浏览器窗口中水平居中父div（最好的方法吗？）;然而，子按钮然后在错误的x位置，因为它应该相对于div但是是固定的。本质上，按钮的x位置应相对于父div，而y位置应相对于浏览器窗口（即固定）。

我该如何做到这一点？

<body>
      <div class="viewport">
          <button id="t">T</button>
       </div>
</body>

.viewport {
background: white;
height: 1024px;
height: 900px;
width: 768px;
margin: 0em auto;
overflow: hidden;
position: absolute;
}

#t{

height: 2.2em;
text-align: center;
background: #CA6161;
border: thin solid #943232;
color: #FFF;
position: fixed;
bottom: 0.3em;
left: 57.7em;
border-bottom: thin solid #FFF;
border-top: thin solid #CFCFCF;
border-left: thin solid #CFCFCF;
border-right: thin solid #FFF;
border-radius: 5px;
}

Answer 1

http://jsfiddle.net/YfWWH/8/

只需从子元素的父元素和左元素中删除绝对属性。

.viewport {
background: white;
height: 1024px;
height: 900px;
width: 50px;
margin: 0 auto;
overflow: hidden;
}

#t{

height: 2.2em;
text-align: center;
background: #CA6161;
border: thin solid #943232;
color: #FFF;
position: fixed;
bottom: 0.3em;
border-bottom: thin solid #FFF;
border-top: thin solid #CFCFCF;
border-left: thin solid #CFCFCF;
border-right: thin solid #FFF;
border-radius: 5px;
}

css在不同维度上的定位不同

1 个答案: