03-02-2012, 07:10
Witam...mam mały problem z position fidex - posiadam na stronie 3 divy jeden pod drugim...1 i 2 chce nadać position fixed a ostatni(3div) ruchomy. w momencie nadania 1 position fixed 2 div zakrywa 1 jest na samej górze strony...dlaczego ?
<body>
<div id="div1">
<img src="gfx/kolo.png" />
</div>
<div id="div2">
<h1><img src="gfx/logo.png"" /></a></h1>
<div id="icon">
<ul>
<li class="1"><a href="#"></a></li>
<li class="2"><a href="#"></a></li>
</ul>
</div>
</div>
<div id="div3">
<img src="gfx/xxx.png" " />
</div>
</body>
html {
height:100%;
}
body {
background: #0a0a0a;
margin: 0;
padding: 0;
height:100%;
overflow-x:scroll;
}
#div1 {
width:963px;
height:100%;
position:fixed;
}
#div2 {
width: 963px;
}
#div2 h1 {
margin:0;
display:block;
}
#icon ul {
display:block;
float:left;
margin-top: -45px;
margin-left: 105px;
width: 400px;
}
#icon ul li {
margin: 1px;
display:block;
float: left;
display: block;
list-style: none;
position:relative;
}
#icon ul li.1 a{
display:block;
background:url(../gfx/1.png) no-repeat ;
width: 46px;
height: 29px;
}
#icon ul li.2 a{
display:block;
background:url(../gfx/2.png) no-repeat ;
width: 52px;
height:29px;
}
#div3 {
float: left;
margin-top: 0px;
height: 375px;
width: 2500px;
padding: 0;
}
<body>
<div id="div1">
<img src="gfx/kolo.png" />
</div>
<div id="div2">
<h1><img src="gfx/logo.png"" /></a></h1>
<div id="icon">
<ul>
<li class="1"><a href="#"></a></li>
<li class="2"><a href="#"></a></li>
</ul>
</div>
</div>
<div id="div3">
<img src="gfx/xxx.png" " />
</div>
</body>
html {
height:100%;
}
body {
background: #0a0a0a;
margin: 0;
padding: 0;
height:100%;
overflow-x:scroll;
}
#div1 {
width:963px;
height:100%;
position:fixed;
}
#div2 {
width: 963px;
}
#div2 h1 {
margin:0;
display:block;
}
#icon ul {
display:block;
float:left;
margin-top: -45px;
margin-left: 105px;
width: 400px;
}
#icon ul li {
margin: 1px;
display:block;
float: left;
display: block;
list-style: none;
position:relative;
}
#icon ul li.1 a{
display:block;
background:url(../gfx/1.png) no-repeat ;
width: 46px;
height: 29px;
}
#icon ul li.2 a{
display:block;
background:url(../gfx/2.png) no-repeat ;
width: 52px;
height:29px;
}
#div3 {
float: left;
margin-top: 0px;
height: 375px;
width: 2500px;
padding: 0;
}
