div的postion对其内部嵌入的label的影响

这里
html文件如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Carousel</title>
        <link rel="stylesheet" href="css/layout.css" />
    </head>
    <body>
        <div class="header"></div>
        <div class="content">
            <div class="content-wrap">
                <input type="radio" name="slider" id="slider1" checked="checked"/>
                <input type="radio" name="slider" id="slider2"/>
                <input type="radio" name="slider" id="slider3"/>
                <input type="radio" name="slider" id="slider4"/>
                <div class="slide_bd">
                    <ul class="ce">
                        <li><img src="img/001.jpg" alt="" /></li>
                        <li><img src="img/002.jpg" alt="" /></li>
                        <li><img src="img/003.jpg" alt="" /></li>
                        <li><img src="img/004.jpg" alt="" /></li>
                    </ul>
                </div>
                <div class="slide_label">
                    <label for="slider1"></label>
                    <label for="slider2"></label>
                    <label for="slider3"></label>
                    <label for="slider4"></label>
                </div>
            </div>
        </div>
        <div class="footer"></div>
    </body>
</html>

css文件如下：

body{
    padding: 0;
    margin: 0;
}

.content-wrap{
    position: relative;
    width: 460px;
    height: 350px;
    margin: 0 auto;
    overflow: hidden;
}

.slide_bd{
    width: 100%;
    height:100%;
    overflow: hidden;
    position:absolute;
}
.slide_bd .ce{
    position:absolute;
    left:0;top:0;
    padding-left: 0;
    width: 400%;
    height: 100%;
    list-style: none;
    overflow: hidden;
    -moz-transition: left .5s ease-out;
    -webkit-transition: left .5s ease-out;
    -ms-transition: left .5s ease-out;
    -moz-transition: left .5s ease-out;
    transition: left .5s ease-out;
}
.slide_bd .ce img{
    width: 460px;
    height: 350px;
}

.slide_bd .ce li{
    float:left;
}

#slider1:checked~.slide_bd .ce{left:0;}
#slider2:checked~.slide_bd .ce{left:-100%;}
#slider3:checked~.slide_bd .ce{left:-200%;}
#slider4:checked~.slide_bd .ce{left:-300%;}

.slide_label{
    position: absolute;
    
}
.slide_label label{
    width: 13px;
    height: 13px;
    line-height:10px;
    border-radius: 13px;
    display:inline-block;
    background:#999;
    text-indent:-9999px;
    
}

.content-wrap input{
    display: none;
}

.slide_label label:hover,#slider1:checked~.slide_label label:nth-child(1),#slider2:checked~.slide_label label:nth-child(2),#slider3:checked~.slide_label label:nth-child(3),#slider4:checked~.slide_label label:nth-child(4){
    background: #f00;
    cursor: pointer;
    
}

为什么当.slide_label{

position: absolute;

}
中的postion：为static时，label：hover会失效,鼠标也无法点击相关label。.slide_label使用float也会使label：hover失效。slide_label的postion为relative,fixed,absolute均可以使label：hover生效。

.slide_bd使用了position:absolute导致div脱离默认文档流，直接依附至body。
.slide_label使用postion:static时，未脱离文档流。
.slide_label使用float时，可理解为半脱离文档流，即位置离开默认文档流位置，但仍依附于原有父级。
位于新文档流的.slide_bd将覆盖于默认文档流之上，导致:hover被处于上层的.slide_bd触发，而无法由下层的.slide_label触发。
.slide_label使用position:relative/fixed/absolute时，将脱离默认文档流。由于在html中的出现次序在.slide_bd之后，其z轴方向在.slide_bd之上，所以可以触发:hover。

此外……

其实你本可以很方便的发现这一问题：
只要你把ul.ce的外边距取消，我相信你一定可以一眼发现问题的所在。

ul{
    margin: 0;
}

【热门文章】