css定位

最新推荐文章于 2025-07-17 20:57:17 发布

转载最新推荐文章于 2025-07-17 20:57:17 发布 · 88 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wangruifang/p/7517640.html

css的定位有：

1、普通流定位

　　普通流定位又称为“文档流定位”，即页面中默认的定位

　　　特点：所有的元素默认从其父元素左上角开始出现；所有的块级元素，按从上到下排列，每个元素独占一行；页面中行内元素，按照从左到右的方式排列，一行显示不下则换行。

<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
    <style>
        #d1{
            width:100px;
            height:100px;
            background:pink;
        }
    </style>
 </head>
 <body>
  <div id="d1">我是块级元素div</div>
    <span style="background:yellow">我是行内元素span1</span>
    <span style="background:green">我是行内元素span2</span>
    <p style="background:greenyellow">我是块级元素p</p>
 </body>
</html>

2、浮动定位

　　　　页面中所有的元素都可以设置浮动

　　float：left/right/none/both

　特点：将元素排除在普通流之外，即脱离文档流，那么元素将不再页面占据空间，但是元素依然在页面中显示，而且后面没有浮动的元素要上前占位;浮动元素会停靠在其父元素的左边或者右边，或其他已经浮动元素的边缘上；浮动元素处理的问题，让块级元素能够在一行显示‘浮动元素只能在当前行显示。

<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
    <style>
        div{
            float:left;
            width:100px;
            height:100px;
        }
        #d4{
            float:right;
        }
    </style>
 </head>
 <body>
  <div id= "d1" style="background:greenyellow"></div>
  <div id= "d2" style="background:yellow"></div>
  <div id= "d3" style="background:pink"></div>
  <div id= "d4" style="background:gray"></div>
 </body>

</html>

　　　　注意：浮动定位会引发特殊的效果，如果一行显示不下所有的浮动元素，那么最后一个会换行，但是可能被卡住，是由于上一行某个浮动元素的高度比其他的都大，所以，换行的浮动元素被卡住；元素一旦浮动，宽度则以内容为准，当然前提是没有设置宽度；元素浮动后，该元素将变成块级元素，可以设置高度和宽度（行内元素设置宽高是无效的，行内元素设置宽高有效）；

<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
    <style>
        #s1{
            background:pink;
            width:200px;
            height:100px;
        }
        #s2{
            background:yellow;
            width:200px;
            height:100px;
            float:left;
        }
    </style>
 </head>
 <body>
  <span id="s1">我是没有浮动的span</span>
    <span id="s2">我是浮动了的span</span>
 </body>
</html>

******有一个问题**** 没有浮动的元素并没有压在浮动的元素下，是因为图片，文字，行内块元素，采用的是“环绕”的方式排列，是不能被浮动压在下面的。

*****清除浮动*** clear:none/left/right/both ---> 清除当前元素前面的一个元素浮动带来的影响

****浮动元素对父元素的影响*****：

由于浮动元素不占据页面空间，所以他也就不占据父元素高度

解决方法：

　　直接设置父元素的高度，不好的一点就是有时候并不知道父元素的高度；

　　将父元素也进行浮动设置，不好的一点就是不是所有的时候都要对父元素进行浮动设置，而且父元素浮动，对他后面的元素位置也会有影响；

　　为父元素设置overflow：hidden/auto(overflow可以做溢出处理，也可以撑起浮动元素的父元素的高度)，不好点一点，有需要溢出显示时会被隐藏；

　　clear所有的浮动:both,在父元素中追加一个空的块级元素，并设置clear为both;

*******定位*********

　　定位方式属性：

　　　　position：static/relative/absolute/fixed

　　　　如果取值为relative/absolute/fixed其中的之一，则该元素则被称为“已定位元素”

　　偏移属性：

　　　　作用：为了修改“已定位元素”的位置

　　　　属性：top 以元素的上边为基准变，改变元素的偏移距离

　　　　　　　bottom 以元素的下边为基准变，改变元素的偏移距离

　　　　　　　left 以元素的左边为基准变，改变元素的偏移距离

　　　　　　right 以元素的右边为基准变，改变元素的偏移距离

　　向内的都是正直，向外的都是负值。

　　堆叠顺序

　　　　修改“已定位元素”们之间的堆叠效果，层叠顺序

　　属性：z-index (值为无单位的数字)

　　该属性可以设置任何整数值，数值越大，所排列的顺序越靠前。

3、相对定位

　　　position:relative

　　　一般配合偏移属性实现定位

　　元素相对于自己原来的位置发生的位置的改变，而且该元素原来占据的位置依然保留，不会被其他元素占据

　　使用于元素位置的微调

4、绝对定位

　　position:absolute

一般配合偏移属性来实现定位

特点：脱离文档流，不占据页面空间，会压在其他元素之上

　　　绝对定位的元素会相对于离他最近的、已经定位的祖先元素来实现位置的初始化

　　　如果元素没有已定位的祖先元素，那么他则会相对于body来实现初始化

******小窍门*****

　　一般情况下，绝对定位的元素一定会有一个已经定位了的祖先元素，多数都是由直接父元素来充当这个已经定位了的

影响：

　　脱离文档流

　　绝对定位的元素会变成块级元素

　　margin可以正常使用，但是左右auto值失效

　　绝对定位的元素将left、right、bottom、top设置为0的情况下，会使整个元素变得绝对居中，（auto只对左右有效）

5、固定定位

　　position：fixed

　　固定定位是绝对定位的一种特殊形式，它是以浏览器窗口作为参照物来定义网页元素，如果定义某个元素固定显示，则该元素不在受文档流的影响。他始终以浏览器窗口来定位自己显示的显示位置，不管浏览器窗口如何滚动，也不管浏览器窗口大小如何变化，该元素都会显示在浏览器窗口内。通俗的说就是以浏览器窗口的四条边作为坐标系来定位元素的位置。

转载于:https://www.cnblogs.com/wangruifang/p/7517640.html