绝对定位

来源：互联网发布：sql server 2008修复编辑：程序博客网时间：2024/05/01 16:35

绝对定位注意点：

（1）绝对定位的元素是脱离标准流的。

绝对定位脱标演示：

绝对定位之前：

给第二个box2添加position：absolute；绝对定位属性。

因为第二个box2脱标了，所以box2不属于标准流，box3要向上顶替box2的位置，所以box2脱标后的位置将box3盖住了。

（2）浮动元素是脱离标准流，所以浮动不区分行类和块级。绝对定位是脱离标准流的，所以也不区分行类和块级。绝对定位的元素是不区分块级元素/行内元素/行内块级元素的。

证明如下：

以span标签为例子：

span为行类元素。

没有对span进行绝对定位之前：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>清除浮动</title>

<base target="_self">

<style type="text/css">

*{

padding: 0;

margin: 0;

}

div{

width: 100px;

height: 100px;

}

.box1{

background-color: red;

}

.box2{

background-color: blue;

}

.box3{

background-color: green;

}

span{

width: 100px;

height: 100px;

background-color: yellow;

}

</style>

</head>

<body>

<div class="box1"></div>

<div class="box2"></div>

<div class="box3"></div>

<span>我是内容。</span>

</body>

</html>

对span进行绝对定位之后：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>清除浮动</title>

<base target="_self">

<style type="text/css">

*{

padding: 0;

margin: 0;

}

div{

width: 100px;

height: 100px;

}

.box1{

background-color: red;

}

.box2{

background-color: blue;

}

.box3{

background-color: green;

}

span{

position: absolute;

width: 100px;

height: 100px;

background-color: yellow;

}

</style>

</head>

<body>

<div class="box1"></div>

<div class="box2"></div>

<div class="box3"></div>

<span>我是内容。</span>

</body>

</html>

什么是绝对定位？

绝对定位就是相对于body来定位的。

阅读全文

0 0