034_CSS绝对定位

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

2. CSS绝对定位

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

2.2. 普通流中其它元素的布局就像绝对定位的元素不存在一样:

#box_relative {position: absolute;left: 30px;top: 20px;
}

2.3. 如下图所示:

2.4. 绝对定位的元素的位置相对于最近的已定位祖先元素, 如果元素没有已定位的祖先元素, 那么它的位置相对于最初的包含块。

2.5. 根据用户代理的不同，最初的包含块可能是画布或 html 元素。

2.6. 因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。

3. 绝对定位例子

3.1. 代码

<!DOCTYPE html>
<html><head><title>绝对定位</title><meta charset="utf-8" /><style type="text/css">div {width: 400px;height: 200px;}.img1 {background: red;}.img2 {background: blue; }.img3 {background: green;}.img2.img2-1 {position: absolute; top: 20px; left: 30px;}.img2.img2-2 {position: absolute; top: 20px; left: 30px;}</style></head><body><div style="background: yellow;"><img src="CrashBtn.png" class="img1" /><img src="MagicBtn.png" class="img2 img2-1" /><img src="RefreshBtn.png" class="img3" /></div><div style="background: pink; position: relative;"><img src="CrashBtn.png" class="img1" /><img src="MagicBtn.png" class="img2 img2-2" /><img src="RefreshBtn.png" class="img3" /></div></body>
</html>

3.2. 效果图

4. z-index属性

4.1. 定义和用法

4.1.1. z-index属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

4.1.2. 元素可拥有负的z-index属性值。

4.1.3. z-index仅能在定位元素上奏效(例如: position: absolute;)。

4.1.4. 该属性设置一个定位元素沿z轴的位置, z轴定义为垂直延伸到显示区的轴。如果为正数, 则离用户更近, 为负数则表示离用户更远。

4.2. 默认值

4.3. 可能的值

4.4. 例子

4.4.1. 代码

<!DOCTYPE html>
<html><head><title>z-index属性</title><meta charset="utf-8" /><style type="text/css">div {background-color: #00FFFF;width:150px;height:150px;}img   {background-color: red;position: absolute;left: 0;top: 0;z-index: -1;}</style></head><body><div></div><img src="CrashBtn.png" /></body>
</html>

4.4.2. 效果图

5. clip属性

5.1. clip属性剪裁绝对定位元素。

5.2. 默认值

5.3. 可能的值

5.4. 例子

5.4.1. 代码

<!DOCTYPE html>
<html><head><title>剪裁绝对定位元素</title><meta charset="utf-8" /><style type="text/css">div {width: 300px; height: 300px; border: 1px solid red;}img {position: absolute; clip: rect(0, 60px, 100px, 0); background-color: red;}</style></head><body><div><img src="CrashBtn.png" alt="CrashBtn.png" /></div></body>
</html>

5.4.2. 效果图

034_CSS绝对定位相关推荐

css中绝对定位中的left和top属性
<html><head><title>Absolute Position</title><style type = "text/css& ...
html在页面上div绝对定位,html – 中心浮动div在绝对定位div内
我有这套html和CSS.我想要的是必须让小的小工具块向左浮动但是在绝对定位的小工具包装器内部居中. 因此,小工具包装器绝对位于页面底部.它包含x个小工具,它们在包装器内部浮动. 所有这些小工具应该在 ...
CSS之定位（绝对定位元素的布局）
绝对定位元素的布局: <!DOCTYPE html> <html><head><meta charset="UTF-8"><t ...
CSS之定位（绝对定位）
绝对定位: <!DOCTYPE html> <html><head><meta charset="utf-8" /><titl ...
绝对定位下margin的作用
以前一直对绝对定位下的margin作用很模糊,今天细看一下不使用top,left,margin等 <!DOCTYPE html> <html lang="en" ...
CSS中绝对定位依据谁进行定位？
结论绝对定位的top等的依据元素需满足3个条件: 已定位(position:relative/fixed/absolute) 最近的祖辈元素(一定是祖辈元素不是同辈元素) 说明一般会为body设 ...
IE6下绝对定位的DIV被相对定位的DIV挡住的问题
http://blog.sina.com.cn/s/blog_4be6505c0101cicr.html 今天在做项目的时候,遇到了一个问题,在一个div中,有个绝对的div,不论这个绝对定位的div ...
html给图片做绝对定位,有关绝对定位的全面理解
有关绝对定位的理解 /* 1.未被设置定位之前是大盒子包裹着小盒子,符合标准文档流,如图片1所示 .box1{ width: 500px; height: 500px; background:red ...
iOS上的jQuery.on()冒泡事件绑定以及 iOS绝对定位元素中的输入框
来:http://www.bubuko.com/infodetail-1029287.html 上周遇到两个坑. 一是jQuery的on方法事件冒泡,在iOS中有问题. $("body&q ...

034_CSS绝对定位

034_CSS绝对定位相关推荐

最新文章

热门文章