CSS position (定位)
设置html元素应当显示在浏览器的指定位置
position 属性的五个值：static absolute relative fixed sticky
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>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>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
