这篇文章给大家分享的是有关CSS中position:absolute的示例分析的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。一、绝对定位的特征绝对定位有着与浮动一样的特性，即包裹
这篇文章给大家分享的是有关CSS中position:absolute的示例分析的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
一、绝对定位的特征
绝对定位有着与浮动一样的特性，即包裹性和破坏性。
就破坏性而言，浮动仅仅破坏了元素的高度，保留了元素的宽度；而绝对定位的元素高度和宽度都没有了。
请看下面代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>绝对定位的特征</title>
<style>
.box1,.box2,.box3 {
background-color: orange;
margin-bottom: 30px;
}
.absolute {
position: absolute;
}
.wraper {
display:inline-block;
margin-left: 300px;
}
.float {
float: left;
}
.box3 {
position: absolute;
}
</style>
</head>
<body>
<div class="box1">
<img src="/file/imgs/upload/202210/19/nou4mvq1raj.jpg" alt="A picture" style="width:175px;height:100px" />
<img src="/file/imgs/upload/202210/19/g3l13a5ffod.jpg" alt="A picture" style="width:240px;height:180px" />
<p>这是普通流中的两幅图像。</p>
</div>
<div class="box2">
<img class="absolute" src="/file/imgs/upload/202210/19/nou4mvq1raj.jpg" alt="A picture" style="width:175px;height:100px" />
<img src="/file/imgs/upload/202210/19/g3l13a5ffod.jpg" alt="A picture" style="width:240px;height:180px" />
<div class="wraper">
<img class="float" src="/file/imgs/upload/202210/19/nou4mvq1raj.jpg" alt="A picture" style="width:175px;height:100px" />
<img src="/file/imgs/upload/202210/19/g3l13a5ffod.jpg" alt="A picture" style="width:240px;height:180px" />
</div>
<p>左图，将第一幅图像绝对定位，其完全脱离文档流，并且覆盖在第二幅图像之上；由此看出，绝对定位的破坏性不仅让元素没有了高度，甚至没有了宽度。</p>
<p>右图，将第一幅图像左浮动，其虽然脱离了文档流，但是并没有覆盖在其他元素之上；浮动的破坏性仅仅破坏了元素的高度，而保留了元素的宽度。</p>
</div>
<div class="box3">
<img src="/file/imgs/upload/202210/19/nou4mvq1raj.jpg" alt="A picture" style="width:175px;height:100px" />
<img src="/file/imgs/upload/202210/19/g3l13a5ffod.jpg" alt="A picture" style="width:240px;height:180px" />
<p>将容器绝对定位，体现其包裹性。</p>
</div>
</body>
</html>二、绝对定位的一般规则：
元素绝对定位时，会完全脱离文档流，并相对于其包含块定位。
绝对定位的包含块，是其最近的已定位的祖先元素。
如果这个祖先元素是块级元素，包含块则为该祖先元素的内边距边界，即边框。
如果这个祖先元素是行内元素，包含块则为该祖先元素的内容边界，即内容区。
如果没有已定位的祖先元素，元素的包含块定义为初始包含块。
偏移属性：top、right、bottom、left。
如果绝对定位的元素没有设置偏移属性，虽然脱离文档流，但是它的位置是原地不动的。
偏移属性可以为负值，将元素定位到包含块之外。
代码在这里：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>绝对定位的一般规则</title>
<style>
body {
background-color: #ccc;
}
.container {
width:500px;
background-color: orange;
margin:20px auto 50px auto;
padding:20px;
border:2px solid red;
}
.box2 img,.box3 img,
.box4 img,.box5 img {
position: absolute;
}
.box3 img,.box4 img {
left:0;
bottom:0;
}
.box5 img {
left: -30px;
bottom: -50px;
}
.block {
position :relative;
height: 200px;
}
</style>
</head>
<body>
<div class="container">
<div class="box1">
<p>元素绝对定位时，会完全脱离文档流，并相对于其包含块定位。绝对定位的包含块，是其最近的已定位的祖先元素。</p>
<img src="/file/imgs/upload/202210/19/nou4mvq1raj.jpg" alt="A picture" style="width:175px;height:100px" />
<ul>
<li>如果这个祖先元素是块级元素，包含块则为该祖先元素的内边距边界，即边框。</li>
<li>如果这个祖先元素是行内元素，包含块则为该祖先元素的内容边界，即内容区。</li>
<li>如果没有已定位的祖先元素，元素的包含块定义为初始包含块（一个视窗大小的矩形）。</li>
</ul>
</div><!--关闭box1-->
</div><!--关闭container-->
<div class="container">
<div class="box2">
<p>不管有没有已经定位的祖先元素，只要没有偏移量，绝对定位之后，原地不动，脱离文档流。</p>
<p>下面这个已经绝对定位的图像原地没动，但是已经脱离了文档流。</p>
<img src="/file/imgs/upload/202210/19/nou4mvq1raj.jpg" alt="A picture" style="width:175px;height:100px" />
</div><!--关闭box2-->
</div><!--关闭container-->
<div class="container">
<div class="box3">
<p>没有已经定位的祖先元素，有偏移量，绝对定位之后，以初始包含块（一个视窗大小的矩形）为基准进行偏移。</p>
<p>当偏移量为left:0; buttom:0时，图像水平偏移到了初始包含块左下角（打开网页最开始的那一个视窗的左下角）。</p>
<img src="/file/imgs/upload/202210/19/nou4mvq1raj.jpg" alt="A picture" style="width:175px;height:100px" />
</div><!--关闭box3-->
</div><!--关闭container-->
<div class="container block">
<div class="box4">
<p>有已经定位的祖先元素，有偏移量，绝对定位之后，以已经定位的祖先元素为基准进行偏移。</p>
<p>此处已经定位的祖先元素为这个图像的容器div元素，偏移量为left:0; bottom:0时，图像到了这个容器的左下角（以边框为界）。</p>
<img src="/file/imgs/upload/202210/19/nou4mvq1raj.jpg" alt="A picture" style="width:175px;height:100px" />
</div><!--关闭box4-->
</div><!--关闭container-->
<div class="container block">
<div class="box5">
<p>有已经定位的祖先元素，有偏移量，绝对定位之后，以已经定位的祖先元素为基准进行偏移。</p>
<p>此处已经定位的祖先元素为这个图像的容器div元素，偏移量为left:-30px; bottom:-50px时，图像到了这个容器之外（以边框为界）。</p>
<img src="/file/imgs/upload/202210/19/nou4mvq1raj.jpg" alt="A picture" style="width:175px;height:100px" />
</div><!--关闭box5-->
</div><!--关闭container-->
</body>
</html>三、用margin调整绝对定位元素的位置
绝对定位的元素，除了可以使用top、right、bottom、left进行偏移之外，还能够通过margin值进行精确定位，而且自适应性更好。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用margin调整绝对定位元素的位置</title>
<style>
.box1,.box2,.box3 {
display: inline-block;
margin-right: 150px;
border:1px solid blue;
}
span {
background-color: red;
}
.box2 span,.box3 span {
position: absolute;
}
.meng {
margin-left: -3em;
}
.box4 {
border:1px solid red;
width: 500px;
margin: 50px auto 0 auto;
padding:20px;
}
li {
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="box1">
<span>卡哇伊</span>
<img src="/file/imgs/upload/202210/19/pi2mjamijiy.jpg" style="width:200px;height:300px" />
<span>萌萌哒</span>
</div>
<div class="box2">
<span>卡哇伊</span>
<img src="/file/imgs/upload/202210/19/pi2mjamijiy.jpg" style="width:200px;height:300px" />
<span>萌萌哒</span>
</div>
<div class="box3">
<span>卡哇伊</span>
<img src="/file/imgs/upload/202210/19/pi2mjamijiy.jpg" style="width:200px;height:300px" />
<span class="meng">萌萌哒</span>
</div>
<div class="box4">
<ol>
<li>第一幅图，最开始的样子。</li>
<li>第二幅图，两个标签绝对定位，但是不指定任何偏移量。</li>
<li>第三幅图，用margin负值调整“萌萌哒”的位置，完成。</li>
</ol>
</div>
</body>
</html>放弃偏移属性而改用margin来调整绝对定位元素，其原理在于：
绝对定位的元素，在不设置偏移量的时候，它虽然完全脱离了文档流，但它还在原来的位置。
利用偏移属性进行精确定位，其具体位置是取决于绝对定位元素的包含块，不同的包含块将会有完全不一样的定位结果。
而利用margin进行精确定位，不依赖于任何其他东西，更加可控。
四、绝对定位与整体布局
如何用绝对定位来对页面进行整体布局？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>绝对定位与整体页面布局</title>
<style>
* {
margin: 0;
}
html,body,.page {
width: 100%;
height: 100%;
overflow: hidden;
}
.page {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #ccc;
}
.header {
position: absolute;
height: 50px;
left: 0;
right: 0;
background-color: purple;
padding: 0 5px;
z-index: 1;
}
.header>h2 {
line-height: 50px;
text-align: center;
}
.aside {
position: absolute;
top: 50px;
bottom: 50px;
left: 0;
width: 100px;
background-color: orange;
}
.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 50px;
background-color: purple;
}
.footer>h2 {
text-align: center;
line-height: 50px;
}
.content {
position: absolute;
top: 50px;
right: 0;
bottom: 50px;
left: 100px;
background-color: cyan;
overflow: auto;
}
.content h2 {
margin-top: 100px;
margin-left: 50px;
}
.content li {
margin-left: 100px;
margin-top: 80px;
font-size: 24px;
line-height: 1.5;
}
ol {
margin-bottom: 80px;
}
</style>
</head>
<body>
<div class="page">
<div class="header">
<h2>Header</h2>
</div>
<div class="aside">
<h2>Aside</h2>
</div>
<div class="content">
<h2>实现原理</h2>
<ol>
<li>创建一个div.page，绝对定位，铺满全屏。</li>
<li>创建一个div.header，绝对定位，设定高度。</li>
<li>创建一个div.aside，绝对定位，设定宽度。</li>
<li>创建一个div.footer，绝对定位，设定高度。</li>
<li>创建一个div.content，绝对定位，根据周围div的宽高设定它的宽高；<br />
以div.content元素取代原body元素，所有的页面内容都放在这里面。</li>
</ol>
</div>
<div class="footer">
<h2>Footer</h2>
</div>
</div>
</body>
</html>感谢各位的阅读！关于“CSS中position:absolute的示例分析”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
--结束END--
本文标题: CSS中position:absolute的示例分析
本文链接: https://www.lsjlt.com/news/81029.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0