position: absolute
首先我们先来说一下position属性,这是一个元素定位的属性,它的取值分别有absolute、fixed、relative、static、inherit等,我们先来简单说明一下各个取值的作用。
absolute
生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed
生成绝对定位的元素,相对于浏览器窗口进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative
生成相对定位的元素,相对于其正常位置进行定位。
因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。
static
默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
inherit 规定应该从父元素继承 position 属性的值。
就如以上是所说的各个取值的作用。我们本次主要研究absolute的取值。
按照上面说的意思,通俗一点说就是,absolute取值,是相对其第一个不为static取值的父元素作为其定位。
这里说明一下static为position的默认值,当未明确position的取值时,其取值就为默认取值。当其全部父元素的标签
的取值都为static时,其定位将会取body便签作为其定位标签。
还有值得注意的是,当设置标签的定位未absolute时,该标签的display将会被变更为block,内联元素设置后便
可以设置宽高。
下面我们来通过几个列子来看看当position取absolute时其情况
<!DOCTYPE HTML>
<head>
<meta charset="utf-8"/>
<title></title>
<style type="text/css">
.d1{
width:200px;
height: 200px;
position: absolute;
background-color: blue;
}
</style>
</head>
<body>
<div style="height: 100px; background-color: red;">
</div>
<div class="d1">
</div>
</body>
通过上述例子可以知道,当设置便签元素为absolute时,但未对其left、top等属性进行取值,其定位为正常文档流定位。但其脱离了正常文档流,是不占用正常文档流。
当我对上述例子加入left:50px;属性时。其定位就会找到第一个不为static的元素进行左定位,但因为这里其所有父元素均为static,所以它会找body作为其定位的便签元素。但是其高度还是不会改变,因为我们未设置top;
当我们设置top时,其定位就会找到第一个不为static的元素进行top定位,因为这里其所有父元素均为static,所以它会找body作为其定位的便签元素。如我们设置了left:50px;再设置top:300px;
现在我们来看看absolute脱离文档流的案例:
<!DOCTYPE HTML>
<head>
<meta charset="utf-8"/>
<title></title>
<style type="text/css">
.d1{
width:200px;
height: 200px;
position: absolute;
background-color: blue;
}
.d2{
width:100px;
height: 100px;
position: absolute;
background-color: red;
}
</style>
</head>
<body>
<div class="d1">
</div>
<div class="d2">
</div>
</body>
结果如下:
为什么两个元素会重叠,这是因为这两个元素脱离了文档流,不占用正常文档流的空间,所以重合了起来。
以上就是absolute的有关讲解。
floats属性
想必float属性是我们在编写代码时必不可少的,那么其浮动有哪些特性。我们下面来讲解一下;
首先我们还是通过一个例子看一下:
<!DOCTYPE HTML>
<head>
<meta charset="utf-8"/>
<title></title>
<style type="text/css">
.f1{
width:100px;
height: 100px;
background-color: blue;
float: left;
}
</style>
</head>
<body>
<div class="f1">
</div>
<div class="f1">
</div>
<div style="height: 200px; width: 400px; background-color: red;">
</div>
</body>
通过上面的例子和结果,我们可以进行分析,搜先虽然插入了一个元素,但它是float:left的元素,float属性是不占用正常文档流的,但它和absolute脱离文档流不同,absolute脱离文档流各个元素都会重叠,但float脱离的文本流,两个float元素还是会在同一高度,会互相排列,不会重叠。
下面我们再看一下,我们在红色这个大的div加上一句话爱我中华,我们来看一下结果:
结果如下,文字环绕着float属性的div,为什么会这样呢?
这是因为,float属性虽然让元素脱离了正常文档流,但是是通过提升元素高度使其脱离,其便签高度和正常文档流
中的文字在同一高度,所以会排列起来,而不是重叠起来。
最后补充一下,行内块和行内元素和文字处于同一高度,也就是和float元素处于同一高度,所以他们的按照顺序排列,不会重叠
以上就是position: absolute和 float讲解,若有不理解的地方可以私信我。有任何不对的地方欢迎指出。