day 13

绝对定位

属性值：absolute

参考元素：参考的是距离最近的有定位的祖先元素，如果所有的祖先元素都没有设置定位，则参考body

如果想要发生位置偏移，必须搭配偏移量的属性

上述例子参考的是body标签来进行移动的，而且已经脱标

绝对定位的性质：绝对定位元素是脱离了标准流的，让出了标准流的位置，后面的标准流元素会占领该元素脱标之前的位置，此时该元素脱标后不再受标准流的控制（比如span标签定位后可以设置宽度和高度了），任意标签都可以设置绝对定位

需要注意的是绝对定位的参考点是不固定的，有可能是某个祖先级元素，也可能是body标签

以body为参考元素的参考点

如果该绝对定位元素的所有祖先元素都没有设置定位，那么此时body就是该元素的参考点

参考点：根据偏移方向组成的body页面首屏的四个顶点

如果top参与的绝对定位，参考点是body左上顶点或者右上顶点

Left和top参考点是body的时，参考位置是左上顶点，对比点就是自身的左上顶点

top: 50px;

left: 50px;

Right，top参考点是body时，参考位置是右上顶点，对比点就是自身的右上顶点

Left、bottom参考点是body时，参考位置是左下顶点，对比点就是自身的左下顶点

Right、bottom参考点是body时，参考位置是右下顶点，对比点就是自身的右下顶点

以祖先元素为参考点进行偏移

如果某个或者某几个祖先元素有定位，不论是什么类型（不区分相对定位或者绝对定位），在html结构中谁距离目标定位元素最近，谁就是参考元素。

作为绝对定位的参考点，祖先元素可以使相对定位，绝对定位或者是固定定位，不区分任何类型，后代和组先级组合方式一共有三种：
子绝父相（常用），子绝父绝，子绝父固

由于相对定位元素不脱标，导致结构更加稳定，大部分都使用子绝父相

祖先元素的参考点和之前的body的类似，区别就是范围更小，小到了某个有定位的元素上

绝对定位的使用场景

制作压盖

居中

原理：通过对父亲的百分比定位设置然后margin为负的自己宽（高）

的一半，从而实现居中显示

如果绝对定位偏移属性值为百分比，百分比参考的距离最近的有定位的祖先元素的宽（高）的百分比

div{

width: 400px;

height: 100px;

background:pink;

margin: 100px auto;

position: relative;

}

div p{

width: 100px;

height: 100px;

left: 50%;

margin-left: -50px;

background-color: gold;

position: absolute;

}

首先设置left值为50%；

第二步将margin设置为自己宽度的负的一半

可以利用margin-left：-50px；来将子盒子和父盒子中心线重合

固定定位

属性值：fixed

参考元素：浏览器的窗口

参考点：根据偏移组合方向不同，分别为浏览器的窗口的四个顶点

性质：固定定位元素是脱标的，让出标准流位置，可以设置宽度和高度，也可以指定任意位置，不设置宽度和高度只能被内容撑高（宽）

固定定位是将盒子固定在某一位置，会随着滚动条的滚动而移动从而保持在页面上的位置固定，与常见网页的“回到顶部”机理类似

压盖顺序

默认的压盖顺序

有定位的，没有定位的，标准流的，如果同时叠到一起，谁权重更高？

此时关于优先级，定位元素是根据html的书写顺序决定的

自定义压盖顺序：

z-index属性是专门用于设置定位元素的压盖层级的

属性值是数字，数字表示压盖层级

div.box1{

width: 400px;

height: 400px;

background:pink;

float: left;

}

div.box2{

width: 300px;

height: 300px;

background: skyblue;

position: relative;

left: 0;

top: 0;

z-index: 1;

}

div.box3{

width: 200px;

height: 200px;

background:orange;

position: absolute;

top: 0;

left:0;

z-index: 2;

}

div.box4{

width: 100px;

height: 100px;

background: yellowgreen;

position: fixed;

left: 0;

top: 0;

z-index: 3;

}

Conclusion：
属性值大的压盖属性值小的，设置了z-index属性的压盖没有z-index属性的

如果z-index属性值相同，那么html后写的压盖先写的

如果元素没有定位，则z-index失效

如果是父子盒模型，不涉及关于覆盖或者互相比较权重的问题。

不论父盒子的z-index属性设置多大，都不会覆盖子盒子。

轮播图布局

补充知识：

border-radius：属性是css3属性，属性作用是设置盒子的圆角状态，50%是圆形，前提盒子必须使正方形

属性值可以使百分比或者数字

cursor：pointer属性作用指的是鼠标移上之后的指针状态变为手状

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<style>

padding: 0;

margin: 0;

}

.outer{

width: 800px;

height: 450px;

margin: 100px auto;

border:5px solid #ccc;

position: relative;

}

/* 这里使用并集选择器的话是同时把ul和li清除了默认样式，然后下面的ol li也受到了影响，从而被清除了默认样式 */

ul,li{

list-style: none;

}

.outer ul li{

position: absolute;

left: 0;

top: 0;

display:none;

}

.outer ul li.current{

display:block;

}

.outer .btns a{

position: absolute;

text-decoration: none;

color:#fff;

font-size: 40px;

font-family:serif;

width: 40px;

height: 80px;

top:50%;

margin-top:-40px;

background-color:rgba(255,255,255,0.4);

text-align: center;

line-height: 80px;

}

.outer .btns a.right{

position: absolute;

right: 0;

}

.outer .circle{

width: 180px;

height: 20px;

background:rgba(255,255,255,0.4);

position: absolute;

left: 0;

bottom:10px;

left:50%;

margin-left:-90px;

padding: 5px 10px;

border-radius:15px;

}

/* 这里的ol li虽然没有清除默认样式但是加载出来并不是1.1 2.2的形式，是因为上面并集选择器已经把li里面的样式清除了，所以这里不需要再清除默认样式 */

.circle ol li{

width: 20px;

height: 20px;

float: left;

background-color:#fff;

border-radius:50%;

text-align: center;

font-size: 12px;

line-height: 20px;

margin: 0 5px;

cursor:pointer;

}

.circle ol li.cur{

background-color:gold;

color:#fff;

}

</style>

<body>

<ul>

</ul>

</div>

<ol>

</ol>

</div>

</body>

</html>

posted @ 2021-03-16 00:13 Viper7 阅读(80) 评论(0) 收藏举报

刷新页面返回顶部

Viper7

day 13

公告