定位
2018-12-05 本文已影响0人
废废_siri
position--定位
使用position属性可以将网页中的元素放置在网页中的任何位置。一个元素定位后需要结合top、bottom、left、right、z-index来进行具体的定位，否则定位没有效果。
postition的属性值：static(默认值)、relative(相对定位)、absolute(绝对定位)、fixed(固定定位)。
static
该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。
image.png
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>relative demo</title>
<style>
div{
display: inline-block;
}
.d-normal{
width: 100px;
height: 100px;
background-color: blueviolet;
}
.d-position{
width: 100px;
height: 100px;
/* 使用static属性值，top与right失效 */
position: static;
background-color: brown;
right: 10px;
top: 15px;
}
</style>
</head>
<body>
<div class="d-normal">yoyo</div>
<div class="d-position">nono</div>
<div class="d-normal">yoyo</div>
</body>
</html>
relative--相对定位
该关键字下，元素先放置在未添加定位时的位置，在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）--也就是不会影响其他的元素的位置。设置了相对定位的元素根据自己原来的位置进行偏移。
特性：
-相对定位不会使元素脱离文本流。元素在文本流中的位置不会改变。
-相对定位不会改变元素原来的特性(block、inline)。
-相对定位会使元素的层级提升，使元素可以覆盖文本流中的元素。
image.png
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>relative demo</title>
<style>
div{
display: inline-block;
}
.d-normal{
width: 100px;
height: 100px;
background-color: blueviolet;
}
.d-position{
width: 100px;
height: 100px;
/* 如果不设置left/right/top/bottom，那么定位没有任何效果 */
position: relative;
background-color: brown;
/* 元素相对于原来的位置向左偏移了10像素 */
right: 10px;
/* 元素相对于原来的位置向下偏移了15像素 */
top: 15px;
}
</style>
</head>
<body>
<div class="d-normal">yoyo</div>
<div class="d-position">nono</div>
<div class="d-normal">yoyo</div>
</body>
</html>
absolute--绝对定位
不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。
特性：
-绝对定位会使文档完全脱离正常的文档流。
-绝对定位会使行内元素变为块元素。
-一般使用绝对定位的元素会为其父元素定义相对定位，以确保元素可以相对于父元素进行定位。
-绝对定位的块元素的宽度会包裹内容。
image.png
--
情况一：父元素没有设置定位。则相对于距离最近且是非 static定位的祖先元素来进行偏移。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>relative demo</title>
<style>
div {
/* display: inline-block; */
}
.d-grandpa {
width: 400px;
height: 200px;
/* 相对于设置了定位且距离最近的祖先元素进行偏移 */
position: relative;
background-color: blueviolet;
border: 4px dashed green;
}
.d-father{
width: 300px;
height: 150px;
background-color: rgb(240, 240, 61);
}
.d-position {
width: 100px;
height: 100px;
/* 使用static属性值，top与right失效 */
position: absolute;
background-color: brown;
right: 10px;
top: 15px;
}
</style>
</head>
<body>
<div class="d-grandpa">
<div class="d-father">
<div class="d-position">咋回事儿</div>
</div>
</div>
</body>
</html>
--
image.png
情况二：父元素设置了非 static定位，则相对于父元素进行偏移。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>relative demo</title>
<style>
div {
/* display: inline-block; */
}
.d-grandpa {
width: 200px;
height: 100px;
/* 相对于设置了定位且距离最近的祖先元素进行偏移 */
position: relative;
background-color: blueviolet;
border: 4px dashed green;
}
.d-father{
position: relative;
width: 100px;
height: 80px;
background-color: rgb(240, 240, 61);
}
.d-position {
width: 50px;
height: 60px;
/* 使用static属性值，top与right失效 */
position: absolute;
background-color: brown;
right: 10px;
top: 15px;
}
</style>
</head>
<body>
<div class="d-grandpa">
<div class="d-father">
<div class="d-position">咋回事儿</div>
</div>
</div>
</body>
</html>
固定定位
固定定位的元素会被锁定在屏幕的某个位置上，当访问者滚动网页时，固定元素会在屏幕上保持不动。
用固定定位fixed做一个固定在页面右下角的箭头，点击箭头从页面底部定位到页面头部的案例。
--
HTML主要代码
<div class="content">
<!-- 与下面的锚点结合使用 -->
<h1 id="caption">琵琶行</h1>
<h3>白居易</h3>
<p>
浔阳江头夜送客，枫叶荻花秋瑟瑟。主人下马客在船，举酒欲饮无管弦。醉不成欢惨将别，别时茫茫江浸月。
</p>
<span>
<!-- 创建锚点 -->
<a href="#caption"><img src="images/01-icon.png" alt="定位箭头"></a>
</span>
</div>
--
CSS主要代码
div.content{
padding: 15px;
}
h1,h3 {
text-align: center;
}
div.content span img{
width: 28px;
height: 28px;
position: fixed;
top: 80%;
right: 0;
}
Z-index
z-index 当元素之间重叠的时候，可以设置z-index的属性值来决定哪一个元素覆盖在其余元素的上方显示。 通常来说 z-index 较大的元素会覆盖较小的一个。值越大优先级越高。
效果图
z-index.png
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Z-index demo</title>
<style>
.white{
position: relative;
width: 400px;
height: 200px;
border: 1px dashed #000;
}
.green{
position: absolute;
top: 10px;
left: 50px;
z-index: 1;
background-color: rgb(74, 219, 74);
width: 100px;
height: 100px;
margin: 10px;
}
.yellow{
position: absolute;
top: 50px;
left: 50px;
/* 使用负值降低优先级 */
z-index: -1;
width: 200px;
height: 30px;
background-color: yellowgreen;
}
</style>
</head>
<body>
<div class="white">1
<div class="green">2</div>
<div class="yellow">3</div>
</div>
</body>
</html>
