position

最新推荐文章于 2021-12-21 17:45:34 发布

weixin_30425949

最新推荐文章于 2021-12-21 17:45:34 发布

阅读量47

点赞数

原文链接：http://www.cnblogs.com/sunmarvell/p/8094604.html

版权

当两个元素同时设置，position属性，后写的元素会覆盖先写的。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>博客</title>
<style>
.pre{
       width:500px;
       height:500px;
       position:relative;
       }
.test1{
        width:100px;
        height:100px;
        position:absolute;
        top:100px;
        background:black;
        }
    .test2{
        width:100px;
        height:100px;
        position:absolute;
        top:50px;
        background:blue;
        }
</style>
</head>

<body>
<div class="pre">
<div class="test1"></div>                              
<div class="test2"></div>
<div>
</body>              
</html>

如图所示，后写的蓝色覆盖了先写的黑色部分。这是因为默认的层级关系，文档中后写的层级大于先写的。

2.Position：fixed;不受制于父元素。固定于页面的相应位置。

<style>
.pre{
       width:300px;
       height:300px;
       position:absolute;
       top:200px;
       left:300px;
       background:black;
       }
    .test2{
        width:100px;
        height:100px;
        position:fixed;
        top:50px;
        background:blue;
        }
</style>
</head>

<body>
<div class="pre">
<div class="test2"></div>
<div>

3.position:inherit;

转载于:https://www.cnblogs.com/sunmarvell/p/8094604.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_30425949

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
position

当两个元素同时设置，position属性，后写的元素会覆盖先写的。<!doctype html><html><head><meta charset="utf-8"><title>博客</title><style>.pre{ width:500px; ...
复制链接

扫一扫