绝对定位可以做很多事情,如广告位,弹出框,遮罩层等一些功能

css的定位方式:1.静态定位, 2.绝对定位(固定定位和绝对定位) ,3.相对定位

绝对定位会受到影响的因素有

1.属性的取值。

2.元素偏移量

3.元素偏移参照基准。

绝对定位完全脱离标准文档流

未设置偏移量时,都会按照已经定位(absolute,relative)的父级元素的左上角定位

当设置了绝对定位那么就会有了z-index的属性

fixed 和absolute的区别

1.absolute,无已定位的祖先元素,以html标签为基准偏移

2.有已经定位祖先元素,以距其最近的,已定位的祖先元素为基准偏移

3.fixed定位,有无已定位祖先元素,都以浏览器可是窗口为基准偏移

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绝对定位</title>
</head>
<style>
.wrapper{
width: 880px;
margin:0 auto;
height: 300px;
position: relative;
overflow: hidden;
background-color: #198610
}
.absolute{
position: absolute;
left: 50px;
top:15px;
height: 100px;
width: 200px;
background-color: #861028
}
.fixed{
position: fixed;
left: 10px;
top: 10px;
height: 100px;
width: 300px;
background-color: #9c9c9c;
}
</style>
<body>
<div class="wrapper">
<div class="absolute">position:absolute</div>
<div class="fixed">position:fixed</div>
</div>
</body>
</html>

  

css定位之绝对定位-LMLPHP

大家看看效果,希望对大家有帮助,谢谢

04-17 03:32
查看更多