Relative position with background image
I have a div I would like which I have placed at 25% from the top. However,开发者_如何学运维 the 25% are computed with respect to the size of the background image and not with respect to the size of the visible screen. How can this be fixed?
Update: now the top margin works, but not the left one :(
Any clue?
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;
}
1) use absolute positioning:
#myDiv { position: absolute; top: 25%; }
2) make sure your div is not within another positioned element (if you're not sure of this, just put it just inside the <body> tag, nothing else)
use css property:
div#myDiv {
position:absolute;
top: 25%;
}
on the dive that you want placed 25% from top of visible screen.
if you use relative position then the percentage will be calculated from the parent element.
if you use absolute position the percentage will be calculated from the size of the screen.
So try to using position absolute instead of relative.
edited answer for comment, just add extra div with id wrapper and change postitions, see example below:
<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>
加载中,请稍侯......
精彩评论