文章目录
前言
在做页面布局的时候,用到绝对定位,但是发现在设置left,right,top,bottom等属性后,可以正常进行定位;但是如果仅加上position: absolute的话,而不设置left,right,top,bottom等属性的话,当前元素怎么样都没法覆盖到上层元素。
绝对定位的元素会过根据最相近的定位元素进行定位,如果当前需要被定位的元素没有已定位的祖先元素作为参考值,则相对于html进行定位。脱离文档流,不会占据文档空间。
初始测试代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>绝对定位</title>
<style>
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td,
hr,
button,
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
margin: 0;
padding: 0;
}
body {
position: relative;
width: 500px;
margin: 0 auto;
}
p {
background: aqua;
border: 3px solid blue;
}
span {
width: 100px;
height: 200px;
background: red;
border: 1px solid black;
}
</style>
</head>
<body>
<h1>Absolute positioning</h1>
<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p>
<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our
margins, not both.</p>
<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and
adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line
if possible — like this one containing text</span>, or just go on to a new line if not, much like this image
will do: <img src="long.jpg"></p>
<span class="positioned">Now I'm absolutely positioned, I'm not playing by the rules any more!</span>
</body>
</html>
一、测试元素为块级元素p:
对比不加position: absolute和加上position:absolute的区别。
- 当前的p标签元素没有加绝对定位,仅显示黄色背景色,在正常的文档流中显示。
.positioned {
background: yellow;
}
- 当前的元素仅加上position: absolute;
.positioned {
position: absolute;
background: yellow;
}
块级元素,在不加position: absolute和仅加上position:absolute在布局上没有什么区别。
二、当测试的元素换成行内元素span
对比不加position: absolute和加上position:absolute的区别。
- span标签元素,不添加任何定位属性,默认是static静态定位,处于最基础的文档流的位置。
.positioned {
background: yellow;
}
- 加上
position:absolute;
之后,当前的行内元素直接转换成块级元素出现,有了设置的宽和高。但是并不会覆盖上层元素,仍然存在于原始文档流的位置,位置并没有发生偏移。
.positioned {
position: absolute;
background: yellow;
}
行内元素,在不加position: absolute和仅加上position:absolute在布局上有区别,绝对定位会让行内元素变为块级元素。
三、只是设置left或者right属性(下面都以行内元素span进行定位测试)
.positioned {
position: absolute;
background: yellow;
left: 20px;
}
当前的元素向右平移20px的像素,以最近的父元素,也就是body元素为当前的初始起始左边缘。但不会覆盖上面的普通文档流元素。
四、只是设置top或者bottom属性(下面都以行内元素span进行定位测试)
.positioned {
position: absolute;
background: yellow;
top: 20px;
}
当前的元素向下平移20px的像素,同样以最近的父元素,也就是body元素为当前的初始起始上边界。同时会覆盖普通的文档流元素。
总结
通过上面可知, 一个元素绝对定位,如果只设置left 或right , 他会在有定位的父级内,如果没有,则直接以body为定位父级元素。在正常文档流位置的基础左右移动。
如果只设置top 或botttom,则在正常文档流决定的位置上下移动。