浅谈绝对定位与相对定位

最新推荐文章于 2022-08-30 16:08:35 发布

codeshark

最新推荐文章于 2022-08-30 16:08:35 发布

阅读量2.1k

点赞数

分类专栏： Div+CSS 文章标签： xhtml html 浏览器文档扩展

本文链接：https://blog.csdn.net/codeshark/article/details/2643584

版权

Div+CSS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

绝对定位：position:absolute;主要是通过设置对象的top,right,bottom,left四个方向的边距值来实现。一旦对象采用了绝对定位，它就完全摆脱了文档流与浮动模型，独立存在。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>绝对定位</title>

<style type="text/css">

#a,#b,#c,#d{background-color:#eee;border:2px solid #aaa;width:100px;height:100px;margin:10px 10px;float:left;}

#b{position:absolute;top:80px;left:140px;z-index:1;}

#d{position:absolute;top:80px;left:120px;z-index:0;}

/*此时b,d元素的位置由top值及left值而决定，分别相对于浏览器窗口的上边距与左边距*/

</style>

</head>

<body>

<div id="a">a</div>

<div id="b">b</div>

<div id="c">c</div>

<div id="d">d</div>

</body>

</html>

深度(z-index)：当元素出现“重叠”的时候，可以设置z-index属性，z-index的值越大，显示在越上面。

相对定位：其实它是浮动定位与绝对定位的扩展方式。相对定位使得被设置的元素保持与其原始位置相对，并不破坏其原始位置信息。

比如：当元素b设置为相对定位时，它将相对于自身的原始位置进行定位；而原来的占位信息仍然存在。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>相对定位</title>

<style type="text/css">

#a,#b,#c,#d{width:100px;height:100px;background-color:#eee;border:2px solid #aaa;margin:10px 10px;float:left;}

#b{position:relative;left:50px;top:80px;}

</style>

</head>

<body>

<div id="a">a</div>

<div id="b">b</div>

<div id="c">c</div>

<div id="d">d</div>

</body>

</html>

注意：当对b进行绝对定位后，b就失去了占位信息，其它元素流动到b元素位置。举例如下：“不占位的相对定位”。当父级对象设置为相对定位后，而子级对象设置为绝对定位，父级对象必须指定有限的宽度跟高度值，这样子集对象才能判断自己的left及top值。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>不占位的相对定位</title>

<style type="text/css">

#divGroup{margin:50px 0 0 50px;position:relative;border:2px solid #000;width:450px;height:200px;}

#a,#b,#c,#d{background-color:#eee;border:2px solid #aaa;width:100px;height:100px;margin:2px 2px;float:left;}

#b{position:absolute;top:30px;left:10px;}

</style>

</head>



<body>

<div id="divGroup">

<div id="a">a</div>

<div id="b">b</div>

<div id="c">c</div>

<div id="d">d</div>

</div>

</body>

</html>

codeshark

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
浅谈绝对定位与相对定位

绝对定位：position:absolute;主要是通过设置对象的top,right,bottom,left四个方向的边距值来实现。一旦对象采用了绝对定位，它就完全摆脱了文档流与浮动模型，独立存在。绝对定位#a,#b,#c,#d{background-color:#eee;border:2px solid #aaa;width:100px;hei
复制链接

扫一扫