CSS定位网页元素

2019-04-30 本文已影响10人暖A暖

position 属性

position 属性与float属性一样，在css排版中都非常重要。position顾名思义是和位置相关的属性，用于规定元素的定位类型。
position 属性有4个属性值，这4个属性值代表着不同定位类型：

static：默认值，没有定位，元素保持在原本位置（忽略 top, bottom, left, right 或者 z-index 声明）；
relative：相对定位，相对于其原本的标准位置进行偏移，但是相对定位的元素仍在标准流中，它后面的元素仍以标准流的方式对待它。如："left:20" 表示向元素的左边位置添加 20 像素；
absolute：绝对定位，相对于 static 定位以外的第一个父元素进行定位，元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。绝对定位的元素从标准流中脱离，对其后的其他元素的定位没有影响；
fixed：固定定位，和绝对定位类似，相对于浏览器窗口进行定位，也就是说当拖动浏览器窗口的滚动条时，元素的位置依旧不变。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定；
inherit：规定应该从父元素继承 position 属性的值；

相对定位实例

我们通过实例来看一下元素不定位和相对定位、绝对定位有什么不同，先看一下不定位

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
    .box{
        width:300px;
        height:200px;
        border:1px solid #000;
        }
    .box div{
        height:50px;
        margin:10px;
        }
    .A{
        background:#DD8CD0;
        }
    .B{
        background:#73EBBC;
        }
    .C{
        background:#80A8E5;
        }
</style>
</head>
<body>
    <div class="box">
        <div class="A">
        </div>
        <div class="B">
        </div>
        <div class="C">
        </div>
    </div>
</body>
</html>

设置盒子A为相对定位的代码

.A{
        background:#DD8CD0;
        position:relative;
        top:-30px;
        left:30px;
        }

这里用到了css里面的top和left两个属性，除此之外还有bottom和right，这4个属性只有当postion属性设置为absolute、relative或fixed时才有效果；
通过给盒子A设置相对定位，我们可以知道相对定位的盒子会相对它原来的位置，通
过指定的偏移量到达新的位置，且对父级盒子和相邻盒子都没有影响；

绝对定位的实例

我们知道相对定位是相对于元素本身的的位置作为偏移基准，那么绝对定位呢，使用了绝对定位的元素会以最靠近它的‘已经定位的祖先元素’为基准进行偏移的。如果没有已经定位的祖先元素，就以浏览器窗口为基准进行定位；
我们来给最大的div加一个相对定位，为盒子A加一个绝对定位

.box{
        width:300px;
        height:200px;
        border:1px solid #000;
        position:relative;
        }
.A{
        background:#DD8CD0;
        width:280px;
        position:absolute;
        top:-20px;
        left:50px;
        }

我们看这个图，发现给盒子A绝对定位后，盒子B和盒子C会改变位置，是因为绝对定位的元素会从标准流中脱离；

还有其他的固定定位fixed，大家可以自己尝试一下哟~

z-index属性

z-index 属性指定一个元素的堆叠顺序，拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面（值更大的元素在上面）
z-index 属性的值为整数，可以是正整数或者是负整数，默认值为0。注意只有元素被设置了position属性值时，各元素才可以通过设置z-index属性值来控制重叠高低关系，当两个层的z-index值一样时，将保持原有的高低覆盖关系；
我们来试一下，给最大的div设置相对定位，然后给盒子A和B设置绝对定位

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
    .box{
        width:300px;
        height:200px;
        border:1px solid #000;
        position:relative;
        }
    .box div{
        height:50px;
        margin:10px;
        }
    .A{
        background:#DD8CD0;
        width:280px;
        position:absolute;
        top:0;
        }
    .B{
        background:#73EBBC;
        width:280px;
        position:absolute;
        top:0;
        }
</style>
</head>
<body>
    <div class="box">
        <div class="A">
        A   
        </div>
        <div class="B">
        B
        </div>
    </div>
</body>
</html>

我们看到现在是显示盒子B在上面，那我们现在给盒子A设置z-index值为100，给盒子B设置值为1

.A{
        background:#DD8CD0;
        width:280px;
        position:absolute;
        top:0;
        z-index:100;
        }
    .B{
        background:#73EBBC;
        width:280px;
        position:absolute;
        top:0;
        z-index:1;
        }

现在显示的是盒子A，因为现在盒子A的z-index值比盒子B要大，大家自己动手试一下；

opacity

我们还可以使用opacity:x属性给元素设置透明度，x的取值为0~1之间，从0.0（完全透明）到1.0（完全不透明），值越小越透明。比如我们给A设置透明度为0.3试一下

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
    .box{
        width:300px;
        height:200px;
        border:1px solid #000;
        }
    .A{
                height:50px;
        margin:10px;
        background:#DD8CD0;
        opacity:0.3;
        }
</style>
</head>
<body>
    <div class="box">
        <div class="A"> 
        </div>
    </div>
</body>
</html>