5月16号工作

xjwolaile

于 2013-05-16 13:58:35 发布

阅读量83

点赞数

分类专栏：前端技术

本文链接：https://blog.csdn.net/xjwolaile/article/details/84431650

版权

前端技术专栏收录该内容

188 篇文章 0 订阅

订阅专栏

今天的工作

1、


<style>

*{margin:0; padding:0; list-style:none;} 
li {width:100px; height:100px; margin:0 5px 0 0; background:#000; float:left; position:relative; z-index:1;} 
li span {width:200px; height:200px; background:#c00; position:absolute; top:0; left:100px; z-index:1000;} 

</style>
</head>

<body>

<ul> 
<li>第一块</li> 
<li><span>第二块</span></li> 
<li>第三块</li> 
<li>第四块</li> 
<li>第五块</li> 
</ul> 


</body>

设置父类li是相对定位子类span是绝对定位的情况下无论子类的层级设置的多少高都不法把父类的相对定位给覆盖掉，在设置同样的position:relative/absolute;同级标签之间的等级是无法用z-index超越的上面的例子中的第一个LI的等级永远都要小于后一个LI的等级。


<style>

*{margin:0; padding:0; list-style:none;} 
li {height:100px; margin:0 5px 0 0; float:left; width:100px;} 
li a {position:relative; z-index:1; display:block; height:100px; width:100px;  background:#000;} 
li a:hover {background:#000000;}
li span {display:none;} 
li a:hover span {display:block; background:#c00; width:200px; height:200px; float:left; top:0; left:100px; z-index:1000; } 

</style>
</head>

<body>

<ul> 
<li><a href="" title=""><span>第一块</span></a></li> 
<li><a href="" title=""><span>第二块</span></a></li> 
<li><a href="" title=""><span>第三块</span></a></li> 
<li><a href="" title=""><span>第四块</span></a></li> 
<li><a href="" title=""><span>第五块</span></a></li> 
</ul> 

</body>

无论父类和子类的是什么样的定位方法相对或者绝对定位都无法把子类的层级压过父类的层级如何将子类设定为浮动那么子类只会覆盖掉自己当下的父类其他的父类无法覆盖，将父类和子类都设定为浮动效果一样只能覆盖自身的父类

将父类设定为浮动将在子类设定为绝对的话可以全部覆盖所有父类子类设定为相对效果跟绝对一样


<style>

*{margin:0; padding:0; list-style:none;} 
li {height:100px; margin:0 5px 0 0; float:left; width:100px;} 
li a {display:block; height:100px; width:100px;  background:#000;} 
li a:hover {position:relative; z-index:1; } 
li span {display:none;} 
li a:hover span {display:block; width:200px; height:200px; background:#c00; position:absolute; top:0; left:100px; z-index:1000; } 

</style>
</head>

<body>

<ul> 
<li><a href="" title=""><span>第一块</span></a></li> 
<li><a href="" title=""><span>第二块</span></a></li> 
<li><a href="" title=""><span>第三块</span></a></li> 
<li><a href="" title=""><span>第四块</span></a></li> 
<li><a href="" title=""><span>第五块</span></a></li> 
</ul> 

</body>

还有种方法就在在父类上不设置定位方式用伪类在进过父类的时候在设置父类的定位方法子类始终保持绝对定位这样就可以达到在进过的时候只显示指定的父类块让子类覆盖掉无用的父类块

绝对定位是如何来定位的呢其实根据最近的父类在取得定位的元素但是要当最近的父类的定位是static的时候如果不是话绝对定位就会一层一层的想外寻找定位元素知道找到一个是static的元素时才会定下来如果你的div块都是有非static定位的时候那么他默认的就会是你的html的body来定位因为一般body都是static的定位元素

2、文本流
文本流是什么呢就是在一个div里在只设定div 的高和宽后在里面输入了一段
输入字母或数字或符号、汉字、混合输入，字母流和汉字流之间必定换行
然后什么都没有了这就是一个纯的文本流这样的div是没有层级的，如果在同样的位置在定义个文本流并且给他写一个定位元素的话那么有定位元素的就会自动覆盖没有定位元素的文本流这个说明了只要加上一个定位的元素那么他就会自带一个层级的关系。


<style>

*{margin:0; padding:0; list-style:none;} 
li {position:relative;height:100px; margin:0 5px 0 0; width:100px;background:#888888;} 
a {position:relative;display:block; height:100px; width:100px;  background:#000;top:50px;left:500px;} 
</style>
</head>

<body>

<ul> 
<li><a href="">第一块</a></li> 
<li><a href="">第二块></a></li> 
<li><a href="">第三块</a></li> 
<li><a href="">第四块</a></li> 
<li><a href="">第五块</a></li> 
</ul> 

</body>

这个说明了不管a跑到了那里在原始的li里面都回留有属于a的位置想要去除只有移除li或者在原先a的位置换上其他的东西包括空

css是什么 css的中文解释就是“层叠样式表”是能够做到网页表现与内容分离的一种样式设计语言。

今天的单词
1、picture /pa:k/ 公园
2、pole /peul/ 图片
3、price /prais/ 价格