一步一图剖析CSS中的position定位

时间 2019-11-13

标签一步剖析 css position 定位栏目 CSS 繁體版

原文原文链接

在CSS布局上float和position是永远说不完的道不尽的话题,它们的应用五花八门,组合技巧千奇百怪.一般若是你不是一个很熟练的Csser,那么你对与position确定仍是只知其一;不知其二,好比说我本身... html

position的属性值你们应该是很熟悉的,static,absolute,relative,fixed. 布局

这里作个demo,一步步详解position. ui

(1) 准备一些div,只加上背景色去区分它们,以下图. spa

代码: 3d

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
#example {
    float: right;
}
 
#example p {
    margin: 0 0.25em;
    padding: 0.25em 0;
}
#div-top,
#div-footer {
    background-color: #88d;
    color: #000;
}

#div-1 {
    width: 400px;
    background-color: #000;
    color: #fff;
}

#div-1-padding {
    padding: 10px;
}

#div-1a {
    background-color: #d33;
    color: #fff;
}

#div-1b {
    background-color: #3d3;
    color: #fff;
}
 
#div-1c {
    background-color: #33d;
    color: #fff;
}  
</style>
</head>
<body>
<div id="example">               
    <div id="div-top">
        <p>id = div-top</p>
    </div>
    <div id="div-1">
        <div id="div-1-padding">
            <p>id = div-1</p>
            <div id="div-1a">
                <p>id = div-1a</p>
                <p>这是div-1的子div,div-1a.</p>
            </div>
            <div id="div-1b">
                <p>id = div-1b</p>
                <p>这是div-1的子div,div-1b.</p>
            </div>
            <div id="div-1c">
                <p>id = div-1c</p>
                <p>这是div-1的子div,div-1c.</p>
            </div>
        </div>
    </div>
    <div id="div-footer">
        <p>id = div-footer</p>
    </div>
</div>
</body></html>

(2) 首先是static,这个属性是position的默认属性.这里很少说了,由于一般设置position:static;的状况都是取消定位的.

(3) relative 是相对定位,这个相对指的是元素的正常位置,就是相对于你不加position:relative;的状况进行了如何的偏移.加完这个属性能够经过top,left,bottom,right进行位移设置.若是没有设置这些位移仅仅设置position:relative;那么元素位置不会有任何变化. code

须要注意的是设置为relative的元素,它默认占有的空间还会继续被该元素占有,同时它不会影响其余相邻元素. htm

#div-1 {
    width: 400px;
    background-color: #000;
    color: #fff;
    position: relative;
    top: 10px;
    left: -20px;
}

修改后效果如图:

(4) absolute 是绝对定位,这个属性绝对是position的精髓所在.绝对定位元素会脱离文档流,整个文档会当作它不存在同样去排版,而且它原先所占有的空间也不会存在. utf-8

#div-1a {
    background-color: #d33;
    color: #fff;
    position: absolute;
    top: 10px;
    left: 20px;    
}

这时以前最外层div的float对于div-1a不起做用了,而后它相对于最外层标签html定位了,而且它原先的位置被下面的元素占用了.

上面之因此div-1a是相对于html定位是在必定条件下得,并非通用的.只有在绝对定位的任何祖先元素都没有设置position值为relative或absolute的状况下,它才会比照html进行定位. 文档

若是话被这么说了,那么能够联想到relative+absolute这样的组合必定会产生别的结果. it

若是一个元素被绝对定位,那么先在离本身最近的元素中看有没有相对定位的元素,若是有则以此为参照物.若是没有则追溯祖先元素中有没有相对定位的元素.

(5) relative + absolute = absolute以relative定位.

修改代码:

#div-1 {
    width: 400px;
    background-color: #000;
    color: #fff;
    position:relative;
}

#div-1-padding {
    padding: 10px;
}

#div-1a {
    background-color: #d33;
    color: #fff;
    position: absolute;
}

将div-1加上relative,而后去掉div-1a的top和left.看效果:

能够看到div-1a覆盖了一部分的div-1b,大约一半左右.它变成相对于div-1定位了,而不是html.

(6) position布局

经过relative+absolute就能够实现一些布局效果.

#div-1 {
    width: 400px;
    background-color: #000;
    color: #fff;
    position:relative;
}

#div-1-padding {
    padding: 10px;
}

#div-1a {
    background-color: #d33;
    color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
}

#div-1b {
    background-color: #3d3;
    color: #fff;
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;s
}

能够看到div-1a和div-1b的布局,相对于div-1而且忽略了div-1的padding属性.