六开彩开奖结果2017玽

div+css网页布局设计新开端(9)

时间:2014-03-09 21:00??? 点击:

浮动差不多介绍完了,下面截几图参考参考吧





在多说一句,如果行内元素也设置float,它就自动等于?#27465;?#22359;元素了,等于同时设置了display

下面介绍绝对定位
设置为绝对定位的元素框从文档流完全删除,并相对于其包含块定位,包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。

绝对定位使元素的位置与文档流无关,因此不占据空间。这一点与相对定位不同,相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置。

概念的说法先抛在一边,简单的说
绝对定位就是不在需要margin ,float来进行定位,而?#27465;?#25454;坐标进行定位
坐标起始点在?#27169;?#26159;浏览器的左上角的点

<html>
<head>
<style type="text/css"> 
body{
margin:0;
padding:0;
}
 #a{
width:500px;
height:500px;
border:solid;
margin-left:50px;
}
 #b{
width:100px;
height:100px;
border:soild;
background:green;
position: absolute;
left:30px;
top: 20px;
 </style> 
<head>
<body>
<div id="a">
<div id="b"></div>
 </div>
</body>
</html>


可以看出绿色并不根据他的父div来定位,而是浏览器框左上角的位置
但如果父div也定义了绝对定位或相对定位,会怎样呢?
<html>
<head>
<style type="text/css"> 
body{
margin:0;
padding:0;
}
 #a{
width:500px;
height:500px;
border:solid;
margin-left:50px;
position: absolute;
}
 #b{
width:100px;
height:100px;
border:soild;
background:green;
position: absolute;
left:30px;
top: 20px;
 </style> 
<head>
<body>
<div id="a">
<div id="b"></div>
 </div>
</body>
</html>

那他会根据父div的左上角来定位(父层定义
position: relative;同样有效
也就是说,如果一个定义了绝对定位的层被一个非绝对或相对定位的层包含着,是没任?#25105;?#20041;的,它等于是一个完全独立的div,不受非绝对或相对定位的层?#38469;?/strong>

其实绝对定位比margin定位爽多了,margin定位需要拿周边的div做参照物,而绝对定位只需要根据左上角调整坐标即可
绝对定位是脱离了文本流的,它可以去任何区域,即便那区域已经有div占着了
<html>
<head>
<style type="text/css"> 
body{
margin:0;
padding:0;
} #a{
width:500px;
height:500px;
border:solid;
margin-left:50px;
position: relative; } #b{
width:100px;
height:100px;
border:soild;
background:green;
position: absolute;
left:30px;
top: 20px; } #c{
width:100px;
height:100px;
border:soild;
background:red; } </style> 
<head>
<body>
<div id="a">
<div id="c"></div>
<div id="b"></div> </div>
</body>
</html>


可以看到它覆盖了普通div,无视了普通div的存在
那么是不是?#19981;?#35206;?#27465;?#21160;div呢?

<html>
<head>
<style type="text/css"> 
body{
margin:0;
padding:0;
} #a{
width:500px;
height:500px;
border:solid;
margin-left:50px;
position: relative; } #b{
width:100px;
height:100px;
border:soild;
background:green;
position: absolute;
left:30px;
top: 20px; } #c{
width:200px;
height:200px;
border:soild;
background:red;
float:left;
margin:10px;

#d{
width:100px;
height:100px;
border:soild;
background:blue; } </style> 
<head>
<body>
<div id="a">
<div id="c"></div>
<div id="d"></div>
<div id="b"></div> </div>
</body>
</html>


蓝色是普通div,红色?#27465;?#21160;div ,绿色是绝对定位div
可以看出,绝对定位div是在最高层,能覆盖所有
也就是说普通div在地上遵循地上的流模式
浮动div遵循空中的流模式,一个是地上的飞机,一个是在空中的飞机
那么绝对定位div等于是飞艇了,比飞机飞的要高,而且可以自由移动

现在看看两个绝对定位div遇到一起会怎样
<html>
<head>
<style type="text/css"> 
body{
margin:0;
padding:0;
} #a{
width:500px;
height:500px;
border:solid;
margin-left:50px;
position: relative; } #b{
width:100px;
height:100px;
border:soild;
background:green;
position: absolute;
left:30px;
top: 20px; } #c{
width:100px;
height:100px;
border:soild;
background:red;
position: absolute;
left:60px;
top: 20px;

</style> 
<head>
<body>
<div id="a">
<div id="c"></div>
<div id="b"></div> </div>
</body>
</html>


可以看到,绿色覆盖的红色,这说明两个绝对div是不会有流模式的,所以使用margin无效
他们互相都?#34987;?#30456;不存在,才不会管哪块区域被?#21152;?/span>
那为什么是绿色覆盖了红色,不是红色覆盖绿色?
因为这里
<div id="c"></div>
<div id="b"></div> 
因为红色div在前面,绿色在后,网页是?#21019;?#19978;到下,从左到右解析的,所以解析到红色div先出现,绿色就会覆盖
总而言之,越往后的绝对定位div,等于是它飞的越高,可以覆盖掉前面的绝对定位div
你把这两个掉个头,你会发现是红色覆盖了绿色


还有一种办法,就是用z-index属性,z-index等?#23545;?#39640;就飞的越高,不设置就默认为0
<html>
<head>
<style type="text/css"> 
body{
margin:0;
padding:0;
} #a{
width:500px;
height:500px;
border:solid;
margin-left:50px;
position: relative; } #b{
width:100px;
height:100px;
border:soild;
background:green;
position: absolute;
left:30px;
top: 20px; } #c{
width:100px;
height:100px;
border:soild;
background:red;
position: absolute;
left:60px;
top: 20px;
z-index:1;

</style> 
<head>
<body>
<div id="a">
<div id="c"></div>
<div id="b"></div> </div>
</body>
</html>


这样可以不用考虑绝对定位div的出现顺序就让他们谁在谁上面

来源:幻想编程//所属分类:CSS/更新时间:2014-03-09 21:00
顶一下
(0)
0%
踩一下
(0)
0%
相关内容
  • QQ群
    编程新手

    17243348

    编程新手

    编程爱好者

    179619951

    编程爱好者

    WEB编程开发

    19713232

    WEB编程开发

  • 返回首页
  • 返回顶部
六开彩开奖结果2017玽 幸运飞艇定位杀两码技巧 重庆时时开奖结果记录 金库娱乐游戏平台 时时彩后三乘以0.618 北京极速pk赛车官网 北京pk10计划在线计划 重庆时时历史开奖记录 广东11选5计划大全 极速3d彩票1分钟计划 彩票极速赛车规律破解