CSS之定位和opacity使用
2019-07-16 本文已影响0人
追逐_chase
web.jpeg
定位：将
指定的元素放在指定的位置，通过定位可以任意的排放元素，定位分为:
相对定位,绝对定位,固定定位和默认的值
1.相对定位
- 当
开启相对定位以后，没有设置偏移量，元素是不会发生任何变化 - 当开启元素定位是我们可以通过方位名词:
top,right,left,bottom来设置元素的偏移量， （比如:left元素相对其定位位置的左边）,就是相对于元素在文档流中原来的位置进行定位 - 相对定位的元素
不会脱离文档流 - 相对定位会
提高自己的层级 - 相对定位
不会改变元素的性质，块级元素还是块级，行内元素还是行内
<style>
div{
width: 200px;
height: 200px;
}
div:first-child{
background-color: yellow;
}
div:nth-child(2){
background-color: green;
/* 开启相对定位 */
position: relative;
left: 200px;
top: 200px;
}
div:last-child{
background-color: purple;
}
</style>
<body>
<!-- 定位 -->
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
image.png
2.绝对定位（脱离标准流）
position: absolute;- 如果盒子的没有父元素，那么将来在定位的时候，我们top 、left 、right 、bottom 是相对于
body元素的 - 如果定位的盒子有父元素，但是
父元素没有定位，那么这个子元素定位的方位名词还是相对于body. - 如果定位的盒子有
父元素，并且父元素有定位，那么这个元素的定位是相对于它的父元素（子元素定位的trbl是相对于父元素。） - 绝对定位会提高元素的
层级 - 绝对定位会改变元素的性质
display: inline-block; - 子绝父相
<style>
div{
width: 200px;
height: 200px;
background-color: yellowgreen;
}
div:nth-child(2){
background-color: green;
/* 绝对定位 */
position: absolute;
left: 100px;
top: 100px;
}
div:last-child{
background-color: purple;
}
</style>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
image.png
3.固定定位（脱离标准流）
- 永远是相对于浏览器的
窗口定位 - 改变元素的
显示方式display: inline-block; - 固定定位是固定在浏览器窗口的一个位置，
不会跟随页面的滚动而滚动 -
position: fixed;开启固定定位
<style>
div{
width: 200px;
height: 200px;
background-color: yellowgreen;
}
div:nth-child(2){
background-color: green;
/* 开启固定定位 */
position: fixed;
/* 设置位置 */
left: 100px;
top: 100px;
}
div:last-child{
background-color: purple;
height: 600px;
}
</style>
<body>
<div class="box1">111</div>
<div class="box2">222</div>
<div class="box3">333</div>
</body>
Untitled.gif
总结
| 定位模式 | 是否脱标占有位置 | 是否发生偏移 | 移动位置基准 |
|---|---|---|---|
| 静态static | 不脱标，正常模式 | 不可以 | 正常模式 |
| 相对定位relative | 不脱标，占有位置 | 可以 | 相对自身位置移动（自恋型） |
| 绝对定位absolute |
完全脱标，不占有位置 |
可以 | 相对于定位父级移动位置（拼爹型） |
| 固定定位fixed |
完全脱标，不占有位置 |
可以 | 相对于浏览器移动位置（认死理型） |
4.层级z-index
- 如果定位的元素的层级是一样的，则下面的元素会盖着上面的元素
image.png
-
z-index这个属性，来调整元素的层级，层级越高越优先显示 -
z-index只有开启定位的元素才可以使用
<style>
div{
width: 200px;
height: 200px;
background-color: yellowgreen;
position: relative;
}
div:nth-child(2){
background-color: green;
position: absolute;
left: 100px;
top: 100px;
/* 调整层级 */
z-index: 1000;
}
div:last-child{
background-color: purple;
position: relative;
}
</style>
image.png
4.1应用
<style>
div{
width: 200px;
height: 400px;
border: 1px solid #cccccc;
float: left;
/* 避免边框重合 */
margin-left: -1px;
}
div:hover{
border: 1px solid orange;
/* 在悬停的时候 有一个边框被层级 高的覆盖 */
position: relative;
/* 定位 可以提高自身的层级 */
}
</style>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
层级的应用.gif
5.透明
-
opacity设置透明，取值范围在0-1 - 需要注意的是，这个属性在IE8及一下的浏览器中不起作用
需要使用 这个属性来兼容
filter: alpha(opacity=50)这个里面的取值是0-100
<style>
div{
width: 200px;
height: 200px;
background-color: yellowgreen;
position: relative;
}
div:nth-child(2){
background-color: green;
position: absolute;
left: 100px;
top: 100px;
/* 调整层级 */
z-index: 1000;
/* 设置透明 0-1之间的取值 */
opacity: 0.5;
filter: alpha(opacity=50);
/*
opacity IE8一下的浏览器不支持
可以使用 filter: alpha(opacity=50)代替
0-100之间的值，表示透明度
*/
}
div:last-child{
background-color: purple;
position: relative;
}
</style>
image.png
6.定位盒子居中的问题
我们知道在标准流中使用
margin: 0 auto可以设置盒子居中，但是在定位中，这个属性不起作用，那么如何设置定位盒子的居中？
如果在定位中，设置
left的偏移量是50%,那么就会如下图所示: 我们只需要使用margin-left让盒子便宜起宽度的一半
image.png
<style>
.box {
width: 400px;
height: 200px;
background-color: rebeccapurple;
position: relative;
}
span {
position: absolute;
width: 100px;
height: 20px;
background-color: pink;
left: 50%;
bottom: 10px;
margin-left: -50px;
}
/*
定位的盒子在使用 margin: 0 auto;设置盒子居中是不起作用的 ，这个适合的事标准流
*/
</style>
<body>
<!-- 定位的盒子 -->
<div class="box">
<span class="center"></span>
</div>
</body>
image.png
