-
display:none;元素不显示
.nav-li hover:ul{
display:block鼠标移动到某元素时，取代之前的display:none
查看全部 -
所有具有定位属性的元素有层级，先写的元素会被后写的覆盖
z-index（层级）只作用于带有定位属性的元素
z-index受制于父元素
查看全部 -
脱离文档流
对联广告
登陆弹窗
不受制于父元素，即使父元素带有定位属性
查看全部 -
绝对定位：脱离文档流
查看全部 -
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Document</title> <style> *{margin: 0px;padding: 0px;} .container{ width: 100%; height: 6731px; background: url(img/1.png) no-repeat center top; } .nav{ width: 160px; height: 205; position: fixed; left: 0; top: 50%; margin-top: -103px; font-family: "微软雅黑"; } .nav-li{ width: 160px; height: auto; border-bottom: 1px solid #FFF; background: #333; text-align: center; color: #FFF; font-size: 16px; line-height: 40px; cursor: pointer; } .nav-li ul{ width: 160px; height: auto; background: #fff; display: none; } .nav-li ul li{ width: 160px; height: 40px; border-bottom: 1px dashed #666; color:#333;text-align: center;line-height: 40px; position: relative; }.nav-li ul li:hover .list-3{ display: block;}.tit{ width: 160px; height: 40px;}.nav-li:hover ul{ display: block;}.list-3{ width: 160px; height: auto; position: absolute; left: 160px; top: 0px; display: none;}.list-3Dom{ width: 160px; height: 40px; background: #444; border-bottom: 1px solid #FFF; text-align: center; line-height: 40px; color: #FFF} </style></head><body> <div class="container"> <div class="nav"> <div class="nav-li"> <div class="tit">慕课网的标题</div> <ul> <li>二级栏目 <div class="list-3"> <div class="list-3Dom"> 三级栏目 </div> <div class="list-3Dom"> 三级栏目 </div> <div class="list-3Dom"> 三级栏目 </div> </div></li> <li>二级栏目</li> <li>二级栏目</li> </ul> </div> <div class="nav-li"> <div class="tit">慕课网的标题</div> <ul> <li>二级栏目 <div class="list-3"> <div class="list-3Dom"> 三级栏目 </div> <div class="list-3Dom"> 三级栏目 </div> <div class="list-3Dom"> 三级栏目 </div> </div></li> <li>二级栏目</li> <li>二级栏目</li> </ul> </div> <div class="nav-li"> <div class="tit">慕课网的标题</div> <ul> <li>二级栏目 <div class="list-3"> <div class="list-3Dom"> 三级栏目 </div> <div class="list-3Dom"> 三级栏目 </div> <div class="list-3Dom"> 三级栏目 </div> </div></li> <li>二级栏目</li> <li>二级栏目</li> </ul> </div> <div class="nav-li"> <div class="tit">慕课网的标题</div> <ul> <li>二级栏目 <div class="list-3"> <div class="list-3Dom"> 三级栏目 </div> <div class="list-3Dom"> 三级栏目 </div> <div class="list-3Dom"> 三级栏目 </div> </div></li> <li>二级栏目</li> <li>二级栏目</li> </ul> </div> </div> </div></body></html>查看全部 -
Repeat 平铺查看全部
-
position:inherit;继承父元素的定位类型
查看全部 -
position:fixed;固定定位 原来的位置会被后面的元素占用
不管它有没有父元素，父元素是否定位，它都只会以浏览器窗口的四个角为原点定位，x、y轴的正方向和相对定位、绝对定位一样
查看全部 -
1、position:relative; 相对定位 原先的位置不会被后面的元素占用
（1）若设置了top和left的值，则它以它的父元素的（若没有父元素就以它自己的）左上角为原点，向右向下为x轴、y轴的正方向，移动相应的距离
（2）若设置了top和right的值，则它以它的父元素的（若没有父元素就以它自己的）右上角为原点，向左向下为x轴、y轴的正方向，移动相应的距离
（3）若设置成负值，则原点不变，正方向变为相反的方向
以此类推……
2、position:absolute; 绝对定位 原先的位置会被释放，然后被后面的元素占用
（1）若设置了top和left的值，则它以它的最近的定位了的父元素的（否则以当前可视浏览器窗口的）左上角为原点，向右向下为x轴、y轴的正方向，移动相应的距离
（2）若设置了top和right的值，则它以它的最近的定位了的父元素的（否则以当前可视浏览器窗口的）右上角为原点，向左向下为x轴、y轴的正方向，移动相应的距离
（3）若设置成负值，则原点不变，正方向变为相反的方向
以此类推……
（4）若以浏览器窗口的右下角为原点，且bottom设置为负值时，则它会向浏览器下方移动，这时可能会移动到浏览器的下一屏
查看全部 -
量大元素:块级元素，内联元素
查看全部 -
css中position
查看全部 -
html中的三种布局方式
1、标准流
2、浮动
3、定位
position（解释：定位、位置）定位属性的意义，通过改变正常的标准流，以非正常的方式迫使元素脱离标准流。
position（解释：定位、位置）属性决定了元素将如何定位
通过top（解释：顶部）、right（解释：右边）、bottom（解释：底部）、left（左边）实现位置
position（解释：定位、位置）中有五个可选的参数
static是position（解释：定位、位置）中的默认值，元素按照标准流的方式进行正常的排列。
relative是指相对定位，使用了relative元素让处于正常的文档流中。但是我们可以通过left（左边）、top（解释：顶部）、right（解释：右边）、bottom（解释：底部）来改变元素的位置。
查看全部 -
html可以分为两大元素
1、块级元素（div、h1-h6标题、有序无序列表「ol、ul、li」、table表格、p段落、···）
区别：独占一行。
2、内联元素（a超链接、span文字、img图片、input控件、）
区别：内联元素和相邻内联元素在同一行，如果一行内宽度不够时才会被挤到另一行去。
这两种元素的排列方式呢，是在没有特殊属性的干扰下，在正常的标准流中所表现出来的正常特性。
查看全部 -
position:inherit 可以继承他父元素中的定位属性 前提是他父元素中有定位属性
查看全部 -
hover .list{ display:block }鼠标到达才显示查看全部
举报