CSS中的定位控制

来源：互联网发布：沟通软件编辑：程序博客网时间：2024/05/29 03:12

1 浮动定位

浮动定位并不会影响正常的文档流，但是被浮动的元素会向上层“浮动”（可以理解成行级元素变成了块级元素），例如

<style>        .floatL{            background: blue;            border: 1px solid #000;            width: 100px;            height: 100px;            float: left;/*浮动定位*/        }        .floatR{            background: red;            border: 1px solid #000;            width: 100px;            height: 100px;            float: right;        }        .clearLR{            clear: both;//清除浮动定位        }    </style></head><body>    <span class="floatL"></span>    <span class="floatL"></span>    <div class="clearLR"></div>    <span class="floatR"></span>    <span class="floatR"></span></body>

这里需要注意的是：html元素中有块级元素和行级元素。行级元素会独占一行，例如：<div>；而块级元素就不会，例如：<span>。当<div>被浮动后，它会自动由行级元素上浮为块级元素。

2 相对定位

相对定位是相对于自己父容器的相对定位。

position: relative;

3 绝对定位

绝对定位一般是指相对于页面远点的定位。

position: absolute;

这里需要注意：绝对定位的元素实际上是相对于同样为绝对或者相对定位的父元素的左上角，如果没有就相对于<body>元素。

4 固定定位

固定定位的元素就想被定在屏幕上，而不是页面上，机试页面滚动，元素也不会动，就像一张贴在屏幕上的纸。

position: fixed;

一个简单的例子为：

<!DOCTYPE html><html><head>    <title></title>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <style>        .class1{            border: 1px solid black;            width: 100%;            height: 1000px;        }        .positionF{            background: red;            top:0px;            width: 100%;            position: fixed;        }    </style></head><body>    <div class="positionF">111</div>    <div class="class1">111</div>    <div class="class1">111</div>    <div class="class1">111</div></body></html>

0 0