position(定位)

最新推荐文章于 2022-08-03 20:47:41 发布

相似合同

最新推荐文章于 2022-08-03 20:47:41 发布

阅读量655

点赞数

分类专栏： css

原文链接：https://blog.csdn.net/u010297791/article/details/53176027

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

position 属性规定元素的定位类型，定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

1、position：relative 相对定位

特点：

 1）不影响元素本身的特性；
 2）不使元素脱离文档流（元素移动之后原始位置会被保留）；
 3）如果没有定位偏移量，对元素本身没有任何影响；
 4）提升层级。

注：定位元素位置控制：top/right/bottom/left 定位元素偏移量

2、position：absolute 绝对定位

特点：

 1）使元素完全脱离文档流；
 2）使内嵌支持宽高；
 3）块属性标签内容撑开宽度；

 4）如果有定位父级相对于定位父级发生偏移，没有定位父级相对于document发生偏移；

 5）相对定位一般都是配合绝对定位元素使用；
 6）提升层级

注意：

z-index:[number]；定位层级
a、定位元素默认后者层级高于前者；
b、建议在兄弟标签之间比较层级

接下来用一个例子进行使用说明。
例子要求：如何将左边的三个div变成右边的三个div布局，即将div2的位置移动到如图的位置。

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            position: relative;
        }
        div{
            width: 100px;
            height: 100px;
        }
        .div1{
            background-color: pink;
        }
        .div2{
            background-color: yellow;
            position: absolute;
            left: 100px;
            top: 200px;
        }
        .div3{
            background-color: green;
            position: absolute;
            top:200px;
        }
    </style>
</head>
<body>
    <div class="div1">div1</div>
    <div class="div2">div2</div>
    <div class="div3">div3</div>
</body>
</html>

这里做几点解释：

1）为什么body需要添加position：relative?
因为position：absolute这个属性会根据父级进行定位，如果没有定位父级则会相对于document发生偏移。而body在chrome浏览器中带有默认的样式，即带有margin属性，所以需要给body定义定位，这样后面的div就会根据body进行定位。

2）为什么div3中也需要添加position：absolute?
因为div2中添加属性position：absolute之后，就直接完全脱离文档流，那么div3的位置就会往上移动，为了实现效果，也需要在div3中添加同样的属性。

3、position：fixed 固定定位
与绝对定位的特性基本一致，唯一的差别是始终相对整个文档进行定位；
问题：IE6不支持固定定位；

4、其他定位
position:static ；默认值
position:inherit ; 从父元素继承定位属性的值 (不兼容)、

5、综合例子说明
做一个类似的弹窗效果。

在这里插入图片描述

我用了两种方法实现，一种就是上面总结的，都是利用div和position定位实现的，一种就是直接利用box-shadow属性实现的.

1)利用div和position定位实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>优酷弹幕</title>
    <style>
        div{
            width:300px;
            height:300px;
        }
        .box{
            margin:100px auto;
            position: relative;
        }
        .content{
            background-color: green;
            position: absolute;
            left:-3px;
            top:-3px;
            z-index: 2;
        }
        .mark{
            background-color: #0c1315;
            position: absolute;
            right: -6px;
            bottom: -6px;
            z-index: 1;
            opacity: 0.5;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="content"></div>
        <div class="mark"></div>
    </div>
</body>
</html>

其中用到了三个比较重要的属性：

   a】position  定位

   b】z-index  定位层级

   c】opacity 透明度

    标准 不透明度：  opacity:0~1; 
    IE 滤镜：           filter:alpha(opacity=0~100);

2)利用box-shadow属性实现
box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>优酷弹幕2</title>
    <style>
        .box{
            width:300px;
            height:300px;
            margin:100px auto;
            background-color: green;
            box-shadow:6px 6px 0px #727272;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

————————————————
版权声明：本文为CSDN博主「Wendy-lxq」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/u010297791/article/details/53176027

相似合同

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
position(定位)

  position 属性规定元素的定位类型，定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。1、position：relative 相对定位特点： 1）不影响元素本身的特性； 2）不使元素脱离文档流（元素移动之后原始位置会被保留）； 3）如果没有定位...
复制链接

扫一扫