一天搞定CSS：定位position--17

来源：互联网发布：如何做合格淘宝客服编辑：程序博客网时间：2024/06/06 19:28

1.定位取值概览

这里写图片描述

2.相对定位relative

这里写图片描述

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style>            div{                width: 200px;                height: 200px;                color: #fff;            }            .div1{                background: red;            }            .div2{                background: green;                /*margin: 200px 0 0 200px;*/                position: relative;                left: 200px;                top: 200px;            }            .div3{                background: blue;            }            span{                background: red;                color: #fff;                position: relative;                width: 100px;                height: 100px;            }        </style>    </head>    <body>        <!--            position                定位                relative            相对定位                移动的方向                    top、right、bottom、left                特点                    1、只加相对定位，不设置元素移动的位置，元素和之前是没有变化                    2、根据自己原来的位置计算移动的位置                    3、不脱离文档流，元素移走以后，原来的位置还会被保留                    4、加上相对定位后对原来的元素本身的特征没有影响                    5、提升层级        -->        <div class="div1">div1</div>        <div class="div2">div2</div>        <div class="div3">div3</div>        <span>span</span>    </body></html>

效果图
这里写图片描述

3.绝对定位absolute

这里写图片描述

代码演示

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style>            body{                /*margin: 0;*/                position: relative;            }            div{                width: 200px;                height: 200px;                color: #fff;            }            .div1{                background: red;            }            .div2{                background: green;                position: absolute;                left: 200px;                top: 400px;            }            .div3{                background: blue;                position: absolute;                top: 400px;            }            span{                background: #ccc;                color: #fff;                position: absolute;                width: 200px;                height: 200px;                left: 400px;            }        </style>    </head>    <body>        <!--                absolute            绝对定位                移动的方向                    top、right、bottom、left                特点                    1、完全脱离文档流                    2、行内元素支持所有样式（与加上浮动或者inline-block以后的效果是一样的）                    3、如果父级有定位，那位置会根据父级移动。如果父级没有定位，那位置根据可视区移动                        (一般情况下，要用到绝对定位的时候，都会给父级来一个相对定位)                    4、提升层级                    5、触发BFC        -->        <div class="div1">div1</div>        <div class="div2">div2</div>        <div class="div3">div3</div>        <span>span</span>    </body></html>

效果图

这里写图片描述

4.固定定位fixed

这里写图片描述

代码演示

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style>            .div1{                width: 100px;                height: 100px;                position: fixed;                right: 0;                bottom: 0;                background: red;            }            span{                width: 100px;                height: 100px;                background: green;                position: fixed;                left: 100px;                height: 100px;            }        </style>    </head>    <body>        <!--                fixed           固定定位                移动的方向                    top、right、bottom、left                特点                    1、完全脱离文档流                    2、行内元素支持所有样式（与加上浮动或者inline-block以后的效果是一样的）                    3、相对可视区来移动位置                    4、提升层级                    5、触发BFC                注意                    IE6不支持        -->        <div class="div1">div1</div>        <span>span</span>        页面内容<br />        页面内容<br />        页面内容<br />        页面内容<br />        页面内容<br />        页面内容<br />        页面内容<br />        页面内容<br />        页面内容<br />        页面内容<br />        页面内容<br />        页面内容<br />        页面内容<br />        页面内容<br />        页面内容<br />        页面内容<br />        页面内容<br />        页面内容<br />        页面内容<br />        页面内容<br />        页面内容<br />        页面内容<br />        页面内容<br />        页面内容<br />        页面内容<br />        页面内容<br />        页面内容<br />        页面内容<br />        页面内容<br />        页面内容<br />        页面内容<br />        页面内容<br />        页面内容<br />        页面内容<br />        页面内容<br />        页面内容<br />        页面内容<br />        页面内容<br />        页面内容<br />        页面内容<br />        页面内容<br />        页面内容<br />        页面内容<br />        页面内容<br />        页面内容<br />        页面内容<br />        页面内容<br />        页面内容<br />        页面内容<br />        页面内容<br />        页面内容<br />        页面内容<br />        页面内容<br />    </body></html>

5.默认值static

默认值，不定位

6.层级问题z-index

既然有定位，那么就会出现元素间相互重叠的问题。重叠时显示谁的内容呢？

详情见下一节，z-index来控制层级

链接地址：http://blog.csdn.net/baidu_37107022/article/details/71642885

0 0