#home-slider
应该完全集中在#home
内的所有其他div之后。 margin
和padding
似乎不起作用,因为#home-slider
仍位于其父级div的顶部左侧。我怎么能把它放下并集中?或者更确切地说,我错过了什么?
HTML
<!-- language: lang-html -->
<div id="home">
<div id="home-slider">
<img src="http://lorempixel.com/g/840/420" alt="home-slider" />
</div>
<div class="logo">
<h1><a href="#"><img src="http://lorempixel.com/232/232" alt="logo" id="logo" /></a></h1>
</div><!-- end logo -->
<div id="slider_mask">
<div class="slide_container">
<div class="slide"><p>is where creative <i>je ne sais quoi</i> + business savvy collide.</p></div>
<div class="slide"><p>is the maker + doer for makers + doers</p></div>
<div class="slide">
<ul>
<li>No items.</li> </ul>
</div>
</div>
<div class="left_button"><a href="#" class="left-arrow" title="left arrow"></a></div>
<div class="right_button"><a href="#" class="right-arrow" title="right arrow"></a></div>
</div>
</div><!-- end home -->
CSS
#home-slider {
top:0;
height:100%;
left:0;
position:fixed;
z-index:-9999;
}
#home .logo {
padding-top: 215px;
margin: 0 auto;
width: 232px;
}
#home #slider_mask {
width: 600px;
margin: 0 auto;
padding-top: 60px;
position: relative;
overflow: hidden;
}
#home #slider_mask .left_button {
float: left;
display: block;
width: 23px;
height: 25px;
background: url(img/left-arrow.png);
text-indent: -99999px;
}
#home #slider_mask .left_button:hover {
background: url(img/left-arrow-hover.png);
background-position: 0 0;
}
#home #slider_mask .slide_container {
float: left;
font-size: 120%;
text-align: center;
width: 300px;
}
#home #slider_mask .right_button {
float: right;
display: block;
width: 23px;
height: 25px;
background: url(img/right-arrow.png);
text-indent: -99999px;
}
#home #slider_mask .right_button:hover {
background: url(img/right-arrow-hover.png);
background-position: 0 0;
}
#home #slider_mask .slide {
float: left;
display: block;
text-align: center;
}
答案 0 :(得分:1)
这是因为您在HTML元素上使用内联样式将#home-slider
div定义为具有relative
位置,而在CSS中将其设置为absolute
定位。内联已覆盖外部样式表样式
这是一个更新的小提琴:http://jsfiddle.net/dsZSE/10/
这就是您的#home-slider
代码应该是这样的:
#home-slider{
top:0;
height:100%;
left:0;
background-image:url('http://lorempixel.com/g/840/420');
background-repeat:no-repeat;
background-size:cover;
position:fixed;
z-index:-9999;
}
答案 1 :(得分:1)
我知道你希望#home-slider
落后于其他所有人,而其他人则集中注意力。就像adaam所说的那样“HTML元素上的内联样式将#home-slider
div定义为具有相对位置,而在CSS中你将它设置为绝对定位。内联已经覆盖了外部样式表样式”
我还添加了一些其他css属性here。
HTML应为:
<div id="home-slider">
<img src="http://lorempixel.com/g/840/420" alt="home-slider" />
</div>