CSS Position:设置html元素应当显示在浏览器的指定位置。
position属性的五个值：static absolute relative fixed stickly
static:HTML元素的默认值，即没有定位，遵循正确的文档流对象。
正常的文档流对象：按照从左到右排列，一行排列满了以后自动换行到第二行，以此类推。块级元素前后自动换行。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>static</title>
<style>
b{
display: block;
}
</style>
</head>
<body>
<a href="#">测试HTML的定位设置</a>
<h1>static:没有定位,遵循正常的文档流对象</h1>
<b>按照从左向右排列，一行排列满了以后自动换到第二行，以此类推。</b>
<span>块级元素前后自动换行</span>
<i>通过设置display属性为block，可以将行内元素变成块级元素</i>
</body>
</html>
absolute【绝对定位】：相对【最近的】【已定位】【父元素】
如果元素没有已定位的父元素，那么他的位置相对于<html>
absolute定位使元素的位置与文档流无关，因此不占据空间。
元素使用的顶部top，底部bottom，左侧left和右侧right属性，设置元素位置。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>absolute</title>
<style>
div{
width: 200px;
height:200px;
background-color: red;
position: absolute;
top: 100px;
left: 100px;
}
img{
width: 100px;
height: 100px;
position: absolute;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<h1>absolute:绝对定位</h1>
<h1>相对 【最近的】【已定位】【父元素】</h1>
<h1>如果元素没有已定位的父元素，那么它的位置相对于html</h1>
<h1>absolute 定位使元素的位置与文档流无关，因此不占据空间。</h1>
<h1>元素使用的顶部top,底部bottom，左侧left和右侧right属性,设置元素位置。</h1>
<div>
<img src="imgs/avatar2.png" />
</div>
</body>
</html>
relative【相对定位】：相对其正常定位【没用定位之前的位置】
移动相对定位元素，但它原本所占的空间不会改变。
相对定位元素经常被用来作为绝对定位元素的容器块。
元素使用的顶部top，底部bottom，左侧left和右侧right属性，设置元素位置。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>relative</title>
<style>
div{
width: 200px;
height:200px;
background-color: red;
position: relative;
top: 50px;
left: 50px;
}
img{
width: 100px;
height: 100px;
position: absolute;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<h1>relative相对定位</h1>
<h1>相对其正常位置【没用定位之前的位置】</h1>
<h1>元素使用的顶部top,底部bottom，左侧left和右侧right属性,设置元素位置。</h1>
<h1>移动相对定位元素，但它原本所占的空间不会改变。</h1>
<h1> 相对定位元素经常被用来作为绝对定位元素的容器块。</h1>
<div>
<img src="imgs/avatar2.png" />
</div>
</body>
</html>
fixed【固定定位】：元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。
fixed定位使元素的位置与文档流无关，因此不占据空间。
元素使用的顶部top，底部bottom，左侧left和右侧right属性，设置元素位置。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>fixed</title>
<style>
div{
width: 200px;
height:200px;
background-color: red;
position: fixed;
top: 100px;
left: 100px;
}
img{
width: 100px;
height: 100px;
position: absolute;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<h1>fixed【固定定位】</h1>
<h1>元素的位置相对于浏览器窗口是固定位置,即使窗口是滚动的它也不会移动.</h1>
<h1>fixed定位使元素的位置与文档流无关，因此不占据空间。</h1>
<h1>元素使用的顶部top,底部bottom，左侧left和右侧right属性,设置元素位置。</h1>
<div>
<img src="imgs/avatar2.png" />
</div>
</body>
</html>
sticky【粘性定位】：粘性定位的元素是依赖于用户的滚动，在position:relative与position:fixed定位之间切换。
元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
这个特定阈值指的是top，right，bottom或left之一，换言之，指定top，right，bottom或left四个阈值其中之一，才可使粘性定位生效，否则其行为与相对定位相同。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div.sticky{
border: 2px solid red;
background-color: yellow;
padding: 15px;
position:sticky;
top: 30px;
}
</style>
</head>
<body>
<p>尝试滚动页面。</p>
<p>注意: IE/Edge 15 及更早 IE 版本不支持 sticky 属性。</p>
<div class="sticky">我是粘性定位!</div>
<div style="padding-bottom: 2000px;">
<p>滚动我</p>
<p>来回滚动我</p>
<p>滚动我</p>
<p>来回滚动我</p>
<p>滚动我</p>
<p>来回滚动我</p>
</div>
</body>
</html>
重叠的元素：z-index属性指定了一个元素的堆叠顺序。
整数数字、需要设置position属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#div1{
width: 200px;
height: 200px;
background-color: red;
position: absolute;
z-index: 3;
}
#div2{
width: 200px;
height: 200px;
background-color: blue;
position: absolute;
top: 50px;
z-index: 4;
}
#div3{
width: 200px;
height: 200px;
background-color: yellow;
position: absolute;
top: 100px;
z-index: 2;
}
#div4{
width: 200px;
height: 200px;
background-color: green;
position: absolute;
top: 150px;
z-index: 1;
}
</style>
</head>
<body>
<div id="div1">id="div1"</div>
<div id="div2">id="div2"</div>
<div id="div3">id="div3"</div>
<div id="div4">id="div4"</div>
</body>
</html>
Overflow:属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。
“visible：默认值。内容不会被修剪，会呈现在元素框之外。
hidden：内容会被修剪，并且其余内容是不可见的。
scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其它内容。”
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Overflow</title>
<style>
div{
width: 200px;
height: 200px;
background-color: red;
border: 1px dotted black;
overflow: scroll;
}
</style>
</head>
<body>
<h1>Overflow:属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。</h1>
<h1>visible 默认值。内容不会被修剪，会呈现在元素框之外。</h1>
<h1>hidden 内容会被修剪，并且其余内容是不可见的。</h1>
<h1>scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。</h1>
<div>
<img src="imgs/avatar2.png" />
</div>
</body>
</html>
Float（浮动）：
CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。
元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。
如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#img1{
float: left;
}
#img2{
float: right;
}
</style>
</head>
<body>
<h1>测试元素浮动</h1>
<h1>Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。</h1>
<h1>如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。</h1>
<h1>元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。
clear 属性指定元素两侧不能出现浮动元素。</h1>
<img id="img1" src="imgs/avatar2.png" />
<img id="img2" src="imgs/avatar.png" />
<span style="clear: all;">
浮动元素之后的元素将围绕它。浮动元素之前的元素将不会受到影响。
</span>
</body>
</html>
1788
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
