CSS定位
2020-04-19 本文已影响0人
小疏林er
1、定位
position（属性开关）：属性指定了元素的定位类型。
position的5个值：static、sticky、fixed、relative、absolute 。（常用后三种）
开启了定位以后就可以对top righ bottom left 进行操作了
默认的网页元素出现在左上角 ，网页四周有边界，不同浏览器尺寸还不一样。
2、fixed:固定定位
（1）坐标是网页的左上角 。
（2）定位启动后，原来的空间让出 。
（3）内容永远定在坐标位置，不随窗口滚动而变化位置 。
常用于导航栏、登录、广告等处，可固定在固定位置
注：为了使网页滚动，我给body加了1500px的宽度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
height: 400px;
width: 400px;
}
#div1{
background-color: #009688;
position: fixed;
}
#div2{
background-color: #00F7DE;
}
</style>
</head>
<body style="height: 1500px;">
<div id="div1">
fixed
</div>
<div id="div2">
</div>
</body>
</html>
滚动前.png
滚动后.png
3、absolute:绝对定位
（1）坐标是所在父元素的左上角（父元素要求：离他最近的并启用了定位的父元素）
子元素如果定位选择absolute
position:absolute;父元素就需要开启定位开关（position）
如果父元素未开启定位开关，就找父亲的父亲。。。。一直找到有定位的为止，都没有就找body。（2）定位启动后，原来的空间让出 。
（3）内容当时显示在坐标空间中可以被滚动，后来被覆盖。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
height: 400px;
width: 400px;
}
#div1{
background-color: #009688;
position: fixed;
}
#div2{
background-color: #00F7DE;
position: absolute;
left: 400px;
top: 400px;
}
</style>
</head>
<body style="height: 1500px;background-color: #ffaa7f;">
<div id="div1">
fixed
</div>
<div id="div2">
absolute
</div>
</body>
</html>
body为父元素.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
height: 400px;
width: 400px;
}
#div1{
background-color: #009688;
position: fixed;
}
#div2{
background-color: #00F7DE;
position: absolute;
left: 400px;
top: 400px;
}
#div{
position: absolute;
}
</style>
</head>
<body style="height: 1500px;background-color: #ffaa7f;">
<div id="div1">
fixed
</div>
<div id="div">
<div id="div2">
absolute
</div>
</div>
</body>
</html>
有开启定位的div父元素.png
4、relative:相对定位
（1）坐标是当前自己的位置（没改之前）。
（2）定位启动后，原来的空间不让出。
（3）内容当时显示在坐标空间中可以被滚动，后来被覆盖。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
height: 200px;
width: 200px;
}
#div1 {
background-color: #009688;
}
#div2 {
background-color: #00F7DE;
position: relative;
left: 200px;
}
#div{
background-color: #00FF00;
}
</style>
</head>
<body style="height: 1500px;background-color: #ffaa7f;">
<div id="div1">
</div>
<div id="div2">
relative
</div>
<div id="div">
</div>
</body>
</html>
为加relative定位.png
加了relative定位.png
5、static 静态定位:
（1）HTML 元素的默认值，即没有定位，遵循正常的文档流对象。
（2）静态定位的元素不会受到 top, bottom, left, right影响。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
height: 200px;
width: 200px;
}
#div1 {
background-color: #009688;
}
#div2 {
background-color: #00F7DE;
position: static;
top: 100px;
}
#div{
background-color: #00FF00;
}
</style>
</head>
<body style="height: 1500px;background-color: #ffaa7f;">
<div id="div1">
</div>
<div id="div2">
static
</div>
<div id="div">
</div>
</body>
</html>
加了top: 100px后，没有任何效果,和默认一样。
image.png
6、sticky 粘性定位:
（1）粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。
（2）它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
（3）元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
height: 200px;
width: 200px;
}
#div1 {
background-color: #009688;
}
#div2 {
background-color: #00F7DE;
position: sticky;
left: 300px;
top: 100px;
}
#div{
background-color: #00FF00;
}
</style>
</head>
<body style="height: 1500px;background-color: #ffaa7f;">
<div id="div1">
</div>
<div id="div2">
static
</div>
<div id="div">
</div>
</body>
</html>
未跨越top: 100px这个阈值，相对定位，可以跟随滚动。
image.png
跨越top: 100px这个阈值，固定定位，不可跟随滚动，固定在页面上。
image.png
