css relative 相对布局初识
第一种基本情况:没有使用position left 和 top设置属性无效.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TestHtml</title>
<style type="text/css">
#div1{
width: 200px;
height: 200px;
border: 2px red solid;
/*position: relative;*/
/*position: relative;*/
left: 100px;
top:50px;
}
#text{
/*display: block;*/
/*float:left;*/
}
</style>
</head>
<body>
<div id="div1"></div><span id = "text">偏移的位置还保留不动,覆盖不了前面的div没有偏移的位置</span>
</body>
</html>
效果图如下 符合文档流的基本顺序:
26367EC0-8B8C-493B-B269-598166E08447.png
第二种情况 取消注释 position:relative
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TestHtml</title>
<style type="text/css">
#div1{
width: 200px;
height: 200px;
border: 2px red solid;
/*position: relative;*/
position: relative;
left: 100px;
top:50px;
}
#text{
/*display: block;*/
/*float:left;*/
}
</style>
</head>
<body>
<div id="div1"></div><span id = "text">偏移的位置还保留不动,覆盖不了前面的div没有偏移的位置</span>
</body>
</html>
效果图如下:发现div根据设置的left和top发生了偏移 但是span 还是为什么span的位置这么奇怪呢?
因为设置 relative 并不会脱离文档流.举例例子:
设置relative你可以想象一下，这个div是个飞机，从停机坪飞起来，飞到别的地方去了。但是。。这个停机坪还是要给他留着的，否则飞不回来了
虽然div 设置了left和top的偏移,但是它原来的位置还是进行了保留.等待它飞回的那一刻.而span则保持原来的状态没有发生变化.
584C0CBD-5116-4864-9D42-6814822DF364.png
第三种情况:设置position : absolute
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TestHtml</title>
<style type="text/css">
#div1{
width: 200px;
height: 200px;
border: 2px red solid;
/*position: relative;*/
position: absolute;
left: 100px;
top:50px;
}
#text{
/*display: block;*/
/*float:left;*/
}
</style>
</head>
<body>
<div id="div1"></div><span id = "text">偏移的位置还保留不动,覆盖不了前面的div没有偏移的位置</span>
</body>
</html>
效果图如下: 这里设置absolute ,发现span 跑到文档的开始位置了.
因为设置absolute 会使div脱离文档流.两个保持这样的位置还有就是div 设置top和left的偏移.
1C3E13D9-8BC5-430D-A83C-FEB1251704EF.png
| | |
----|------|-----|
static | 默认。位置设置为 static 的元素，它始终会处于页面流给予的位置（static 元素会忽略任何 top、bottom、left 或 right 声明）。|
relative| 位置被设置为 relative 的元素，可将其移至相对于其正常位置的地方，因此 "left:20" 会将元素移至元素正常位置左边 20 个像素的位置。|
absolute| 位置设置为 absolute 的元素，可定位于相对于包含它的元素的指定坐标。此元素的位置可通过 "left"、"top"、"right" 以及 "bottom" 属性来规定。 |
fixed|位置被设置为 fixed 的元素，可定位于相对于浏览器窗口的指定坐标。此元素的位置可通过 "left"、"top"、"right" 以及"bottom" 属性来规定。不论窗口滚动与否，元素都会留在那个位置。工作于 IE7（strict 模式）。|
另外:
absolute是相对于最近的一个position不为static祖先元素来定位的，如果没有这样的祖先元素，就是相对body定位的，这个时候是会随着页面的滚动而移动的
如果absolute的left top right 没有设置 也是没有效果的.
p标签不可以自由嵌套的,p标签内只能嵌套内联元素，类似h1、div、ul块元素都不可自由嵌套在p标签内。
p默认有margin，div没有 div里面可以放p，p里面不能放div，浏览器会自动将div移动出p外
