Question

我有一个我想要的div，我从顶部放置了25％。然而，25％是相对于背景图像的大小而不是相对于可见屏幕的大小来计算的。如何解决这个问题？

更新：现在最高保证金有效，但不是左边保证金:(

有任何线索吗？

body {
    background: #eeeeee url('pix/bg-noether-2.jpg') no-repeat center top;
    background-size: auto 100%;
    background-attachment: fixed;
    overflow: hidden;
    align: center;
} 

#container {
    background-color: #ffffe4;
    position: absolute;
    width: 776px;
    height: 400px;
    top: 25%;
    margin-left: auto;
    text-align: center;
    overflow: auto;
}

Answer 1

1）使用绝对定位：

#myDiv { position: absolute; top: 25%; }

2）确保你的div不在另一个定位元素内（如果你不确定这个，只需将它放在<body>标签内，没有别的）

Answer 2

使用css属性：

div#myDiv {
position:absolute;
top: 25%;
}

潜水时你想要从可见屏幕顶部放置25％。

Answer 3

如果使用相对位置，则将从父元素计算百分比。

如果使用绝对位置，百分比将根据屏幕大小计算。

因此，尝试使用绝对位置而不是相对位置。

编辑回答评论，只需添加带有id包装的额外div并更改帖子，请参阅下面的示例：

<html>
<head>
<style type="text/css">
body { 
background: #eeeeee url('pix/bg-noether-2.jpg') no-repeat center top;  
background-attachment: fixed; 
overflow: hidden; 
text-align: center; 
}
#wrapper {
position:absolute;
width:100%;
height:100%;
} 
#container { 
background-color: #ffffe4; 
position: relative; 
margin:0 auto;
width: 776px; 
height: 400px; 
top: 25%; 
text-align: center; 
overflow: auto; 
}

</style>
</head>
<body>
<div id="wrapper">
    <div id="container">
        bla bla bla
    </div>
</div>
</body>
</html>

与背景图像的相对位置

更新：现在最高保证金有效，但不是左边保证金:(

3 个答案: