CSS position:absolute全面了解

作者：佚名字体：[增加减小] 来源：互联网时间：2017-08-06

本文主要包含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="http://a.hiphotos.baidu.com/zhidao/pic/item/72f082025aafa40fa38bfc55a964034f79f019ec.jpg" alt="A picture" style="width:175px;height:100px" />
<img src="http://pic1.win4000.com/wallpaper/c/537b28b60619b.jpg" alt="A picture" style="width:240px;height:180px" />
<p>这是普通流中的两幅图像。</p>
</div>
<div class="box2">
<img class="absolute" src=

相关文章