css position relative and absolute布局

简介: css position relative and absolute布局

Created by Jerry Wang, last modified on Sep 01, 2014

</html>

<style type="text/css">

.highlight

{

 background-color:yellow;

 text-decoration:underline;

 width: 100px;

 height: 100px;

 display: block;

}

.div1{

background-color: red;

width: 100px;

position: absolute;

top: 90px;

left: 50px;

}

.div2{

background-color: blue;

width: 100px;

left: 100px;

}

.rule100{

background-color: black;

width: 100px;

}

</style>

<p>Jerry's <span class = "highlight">Hello</span></p>

<div class="div1">div1

<div class="div2">div2</div>

</div>

<div class="rule100">"100px"</div>

</html>

case 1: 当#div2 position为缺省值static(Elements render in order, as they appear in the document flow)时,按照其在document flow内的位置进行布局:


case2: position:absolute(  The element is positioned relative to its first positioned (not static) ancestor element ).

因为现在div1的position布局为absolute,则div2会按照div1的相对位置进行布局。div1 start x offset = 50px, div2本身的left = 100px, 因此div2以相对于document 100+50 = 150px的起始位置进行布局:

image.png

注意在absolute的情况下,div2不仅位置改变,同时也脱离了document flow,因此其原来在div1内的位置已经不再存在:

image.png

case3: position: relative (  The element is positioned relative to its normal position ).

div2原本在div1内的位置为相对document偏移50px,因此最后的水平方向偏移为150px. div2虽然从表面上看已经偏离了原来的位置,但是实际上在document flow中仍然未改变,因此从视觉上相比case2,case3中的div1具有case2的2倍高度。

image.png

case4: div1的position设置为static. 此时top attribute则不再起作用。

image.png

case5: div1的position设置仍然为static,body的position为absolute. div2的css:

 

.div2{

background-color: blue;

width: 100px;

left: 200px;

top: -40px;

position: absolute;

}

 

div2在ui上消失,因为其y坐标在原点上方,并且从document flow里移除,因此div1的高度同case2.

image.png

如果div2改为relative,则其y坐标为static case下的值减去40,最后布局如下:

image.png

相关文章
|
6天前
|
编解码 前端开发 容器
CSS Flex布局实战案例:构建响应式卡片组件
【7月更文挑战第17天】通过上述步骤,我们成功地使用CSS Flex布局构建了一个响应式的卡片组件。Flexbox不仅简化了布局代码,还让我们能够轻松实现复杂的布局效果,如响应式设计。在实战中,掌握Flexbox将大大提高前端开发的效率和网页布局的质量。希望这个案例能够帮助你更好地理解和应用Flexbox布局。
|
18天前
|
移动开发 前端开发 HTML5
CSS 【实战】 “四合院”布局
CSS 【实战】 “四合院”布局
19 0
CSS 【实战】 “四合院”布局
|
15天前
|
编解码 前端开发 C++
CSS【详解】布局 display ( 含 flex 布局,grid 布局,table 布局,float 布局,响应式布局 等)
CSS【详解】布局 display ( 含 flex 布局,grid 布局,table 布局,float 布局,响应式布局 等)
30 0
|
15天前
|
前端开发 容器
CSS【详解】定位 position (静态定位 static -- 文档流排布 、相对定位 relative、绝对定位 absolute、固定定位 fixed、黏性定位 sticky)
CSS【详解】定位 position (静态定位 static -- 文档流排布 、相对定位 relative、绝对定位 absolute、固定定位 fixed、黏性定位 sticky)
9 0
|
18天前
|
前端开发
CSS 自测题 -- 用 flex 布局绘制骰子(一、二、三【含斜三点】、四、五、六点)
CSS 自测题 -- 用 flex 布局绘制骰子(一、二、三【含斜三点】、四、五、六点)
8 0
|
18天前
|
前端开发 C++ 容器
css【详解】—— 圣杯布局 vs 双飞翼布局 (含手写清除浮动 clearfix)
css【详解】—— 圣杯布局 vs 双飞翼布局 (含手写清除浮动 clearfix)
21 0
|
15天前
|
前端开发 UED
使用HTML和CSS创建响应式表格
在网页设计中,表格是一种组织和展示数据的有效方式。本文档将指导你如何使用HTML和CSS来创建一个既美观又响应式的表格,以便在不同设备和屏幕尺寸上都能良好显示。我们将涵盖基础的HTML表格结构,样式美化以及如何实现响应式布局,使得表格内容在小屏设备上也能清晰阅读
57 0
|
20天前
|
前端开发 JavaScript
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
|
27天前
|
安全 JavaScript
旋转木马轮播图 html+css+js
旋转木马轮播图 html+css+js
|
27天前
|
移动开发 前端开发 JavaScript
HTML5+CSS3+JavaScript网页实战
HTML5+CSS3+JavaScript网页实战