HTML布局之CSS绝对定位

最新推荐文章于 2024-10-12 12:00:00 发布

iteye_16353

最新推荐文章于 2024-10-12 12:00:00 发布

阅读量310

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/iteye_16353/article/details/82651939

版权

css 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

[align=center]HTML布局之CSS绝对定位[/align]
[b]1.1 CSS绝对定位——position[/b]
[b]1.1.1语法[/b]
position:static;
无特殊定位，对象遵循HTML定位规则。
position:absolute;
将对象从文档流中拖出（即脱离他的父级元素），使用left，right，top，bottom等属性进行绝对定位(相对于整个页面来换算的)。而其层叠通过css z-index属性定义。此时对象不具有边距，但仍有补白和边框
position:relative;
对象不可层叠，依据left，right，top，bottom等属性在正常文档流中偏移位置。
position:fixed;
相对于窗口的固定定位,元素的定位方式同absolute类似，但它的包含块是视区本身。在屏幕媒体如浏览器中，元素在文档滚动时不会在浏览器视察中移动。left right top bottom四个属性相对于窗口来换算，与相对于整个页面来换算最大的区别是当页面宽高超过窗口的时候。
[color=red]注意：IE6不支持CSS中的position:fixed属性。[/color]
[b]1.1.2实际应用[/b]
绝对定位position用于定位盒子对象，有时一个布局中几个小对象，不易用css padding、css margin进行相对定位，这时就可以使用绝对定位。特别是一个盒子里几个小盒子不规律的布局，这个时候使用position绝对定位非常方便布局对象。
例：绝对定位子级块在父级块盒子内的位置。
HTML代码
<div class="div1">
<div class="div1-a"></div>
</div>
CSS代码
.div1{
[color=green]/*定义父级position:relative，就认为是绝对定位声明吧*/[/color]
position:relative;[color=green]/*最好再定义CSS宽度和CSS高度*/[/color]
}
.div1-a{
[color=green]/*使用绝对定位position:absolute样式并且使用left、top进行定位位置*/[/color]
position:absolute;
left:10px;[color=green]/*定义了距离父级左侧距离间距为10px*/[/color]
top:10px;[color=green]/*定义了距离父级上边距离为10px*/[/color]
}
或
.div1-a{
[color=green]/*使用绝对定位position:absolute样式并且使用right、bottom进行定位位置*/[/color]
position:absolute;
right:10px; [color=green]/*定义了距离父级靠右距离10px*/[/color]
bottom:10px; [color=green]/*定义了距离父级靠下边距离为10px*/[/color]
}
[color=red]注意:
1>left（左）和right（右）在一个对象只能选一种定义，bottom（下）和top（上）也是在一个对象只能选一种定义。
2>绝对定位与float浮动不能同时使用。[/color]
总结
通过CSS进行定义定位，DIV布局HTML，注意什么地方使用position:relative，什么地方使用position:absolute进行定位，同时不要忘记使用left、right、top、bottom的配合定位具体位置。
绝对定位如果父级不使用position:relative，而直接使用position:absolute绝对定位，这时将会以body标签为父级。使用position:absolute定义对象无论位于DIV多少层结构，都将会被拖出以<body>为父级（参考级）进行绝对定位。
left、right、bottom、top的数值可以使用PS切片工具获取准确的数值。
[b]1.2 CSS层重叠顺序——z-index[/b]
实际上，应该把网页想象成鸟瞰图。虽然看到的是平面的，但实际上它是有立体的概念的。z-index来管理HTML元素的高度。
[color=red]注意：后写的定位的层级比先写的高。[/color]
[b]1.2.1语法[/b]
z-index:number[具体数字];数字为负值时，设置该属性的元素被普通流中的元素覆盖。
z-index:auto[默认，IE6/IE7中未设置的情况下，元素的z-index值为零];设置了该属性的元素不参与层级比较。
z-index:inhert;

例：
div{
z-index:100;
}
[b]注意：[/b]
z-index的数值不跟单位。
值必须为整数和正数（正数的整数）。
z-index的值越高越靠前。
[b]z-index使用条件[/b]
z-index的使用依赖于定位属性，让不同的对象盒子以不同顺序重叠排列。
[b]1.2.2两个DIV或多个DIV顺序重叠加[/b]
使用position实现绝对定位，对父级设置position:relative属性，对其子级设置position:absolute加上left或right和top或bottom实现子级在父级内任意定位。在原始情况下重叠是按DIV代码本身顺序排列，越后输入的DIV盒子其越靠前（浮在上面）。除了改变源代码本身div代码在html顺序，还可以使用css z-index实现DIV层排列顺序。