【CSS 基础】 12 position

来源：互联网发布：贪吃蛇大作战数据编辑：程序博客网时间：2024/05/16 19:41

概述

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

相对定位

position:relative;

参照元素原来的位置进行移动
通过”left”、 “top”、 “right”、 “bottom” 属性进行定位
元素原有的空间位保留
元素在移动时会盖住其他元素

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style type="text/css">            #bd1{                width: 120px;                height: 120px;                background: #E19D59;            }            #bd2{                width: 120px;                height: 120px;                background: #FF0000;                position: relative;                left: 20px;                top: 20px;            }            #bd3{                width: 120px;                height: 120px;                background: #008000;            }        </style>    </head>    <body>              <div id="bd1"></div>        <div id="bd2"></div>        <div id="bd3"></div>            </body></html>

相对定位效果图

绝对定位

position:absolute;

参照距离他最近的有定位属性的父级元素进行移动
通过”left”、 “top”、 “right”、 “bottom” 属性进行定位
元素完全脱离文档流，原有位置不再保留
元素在移动时会盖住其他元素
一般我们设置绝对定位时，都会找一个合适的父级将其设置为相对定位。最好为这个具有相对定
位属性的父级设置宽高

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style type="text/css">            #bd1{                width: 120px;                height: 120px;                background: #E19D59;            }            #bd2{                width: 120px;                height: 120px;                background: #FF0000;                position: absolute;                left: 20px;                top: 20px;            }            #bd3{                width: 120px;                height: 120px;                background: #008000;            }        </style>    </head>    <body>              <div id="bd1"></div>        <div id="bd2"></div>        <div id="bd3"></div>            </body></html>

绝对定位效果图

固定定位

以body为定位时的对象，总是根据浏览器的窗口来进行元素的定位
通过”left”、 “top”、 “right”、 “bottom” 属性进行定位
元素完全脱离文档流，原有位置不再保留
元素不会随着文档流的滑动而滑动

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style type="text/css">            #content1{                width: 120px;                height: 2000px;                background: #008000;            }            #content2{                width: 120px;                height: 2000px;                background: #E19D59;            }            #ad{                width: 120px;                height: 120px;                background: #000000;                position: fixed;                bottom: 100px;                right: 100px;            }        </style>    </head>    <body>              <div id="content1"></div>        <div id="content2"></div>               <div id="ad"></div>         </body></html>

固定定位效果图

微信公共号

阅读全文

0 0