css div 中的导航条不在盒子里边,总是在盒子下边

html-css04

css div 中的导航条不在盒子里边,总是在盒子下边,第1张

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html charset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

*{margin:0pxpadding:0px}

ul{width:1212pxheight:40pxmargin:60px auto}

ul li{width:200pxheight:40pxbackground:#eeeborder:1px solid redfloat:leftlist-style-type:noneposition:relative

/*修正1*/

z-index:3}

.content{width:1212pxposition:absoluteheight:600pxbackground:#eeetop:40pxleft:-200px

/*修正2*/

z-index:1}

/*修正3*/

.active{z-index:2}

</style>

</head>

 

<body>

    <ul>

        <li></li>

        <!-- 修正4 -->

        <li class = "active"><div class="content"></div></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

    </ul>

</body>

</html>

可以用position:fixedbottom:0z-index:999试试看能不能达到你想要的效果。

如果达不到可能我理解错了,可以追问。

希望可以帮到你!

内容 content :盒子的主要区域,盒子中的文本内容以及后代元素都显示在内容区域中。

内边距 padding :内容与盒子边界的距离。

边框 border :边框显示在盒子的边界上。

外边距 margin :盒子和相邻兄弟元素或父元素的距离。

盒子的大小=内容的大小+内边距的大小+边框的大小

元素默认 总宽度 = 父元素内容的宽度 - 元素自己的左右外边距

元素默认 内容宽度 = 父元素内容的宽度 - 元素自己的左右外边距 - 元素自己的左右边框宽度 - 元素自己的左右内边距