CSS: float属性和position属性的区别和应用(一)

最新推荐文章于 2020-06-25 16:17:52 发布

linybo2008

最新推荐文章于 2020-06-25 16:17:52 发布

阅读量871

点赞数

分类专栏： bootstrap、CSS等 asp.net编程

asp.net编程同时被 2 个专栏收录

71 篇文章 0 订阅

订阅专栏

bootstrap、CSS等

18 篇文章 0 订阅

订阅专栏

在使用div+css进行网页制作时，我们经常需要对某些元素进行一些必要的定位，使其能按照我们预想的效果呈现在页面合适的位置上，而float和position便是实现这一效果的两种方法。

一、浮动(float)

float属性经常被运用于制作Horizontal Menu（横向菜单）和实现多列式网页布局。根据它提供的left 和right 两个值，我们可以很容易的把特定的元素从文档流中抽出（也因此浮动元素不占用正常文档流的空间），靠左或者靠右对齐，而文字内容则围绕在浮动元素的周围。如果是一系列的浮动元素，则会根据所指定的浮动方式自动的排列成一行；如果页面宽度不够，则会自动换行。

二、定位(position)：相对定位(relative)、绝对定位(absolute)和z-index属性

position属性同样可以实现和float属性一样的效果，其主要被运行于网页布局上。它主要提供static, relative, absolute和fixed四个值。其中static为默认值，指示元素出现在正常的文档流中；另外三个的说明详见如下：

相对定位(relative)：相对于该元素在文档流中的正常位置进行偏移定位，原占位仍保留。

绝对定位(absolute)：相对于static定位以外的最邻近父级元素进行偏移定位，即相对于其直接父级元素。绝对定位较少直接单独使用在正常的文档流中，而是配合相对定位来进行一些更灵活更精确的定位。换言之，就是绝对定位主要运行于进行了相对定位的元素框架层里面，然后依据该层的最左上点作为基点进行偏移定位。

固定定位(fixed)：相对于浏览器窗口进行定位，即固定定位是以浏览器窗口的最左上点作为基点进行偏移定位的。其位置随时跟随浏览器大小的变化而移动，因此应用得很少。主要运行于浏览器窗口的贴边定位。绝对定位(absolute)同样可以应用在固定定位的框架层里面。

对于这三种定位，被定位的元素的位置都是通过 "left", "top", "right" 以及 "bottom" 这四个属性进行指定的。需要将被这三种方式定位的对象还原到正常的文档流中，可使用static属性对其再次定位。

z-index属性：使用了以上三种定位后，都会使正常的文档流一定程度上发生改变，造成元素显示出现重叠的情形，特别是使用绝对定位时。为了能让重叠的元素有序的显示出来，我们需要在定位时对相关元素加上z-index属性，其值是一个整数值（默认值为0），数值越大表示拥有的优先级越高。该属性只对使用了定位的元素有效。

示例：

column1

z-index默认值为0，数值越大表示该元素拥有更高的显示优先级。

column2

column3

column4

html代码：

 
         < 
         div 
         id 
         = 
         "demo" 
         > 
        
 
         < 
         div 
         class 
         = 
         "column c1" 
         >column1</ 
         div 
         > 
        
 
         < 
         p 
         >z-index默认值为0，数值越大表示该元素拥有更高的显示优先级。</ 
         p 
         > 
        
 
         < 
         div 
         class 
         = 
         "column" 
         id 
         = 
         "c2" 
         >column2</ 
         div 
         > 
        
 
         < 
         div 
         class 
         = 
         "column" 
         id 
         = 
         "c3" 
         >column3</ 
         div 
         > 
        
 
         </ 
         div 
         > 
        
 
         < 
         div 
         id 
         = 
         "d2" 
         > 
        
 
         < 
         div 
         class 
         = 
         "column c1" 
         >column4</ 
         div 
         > 
        
 
         </ 
         div 
         > 
        

css代码：

1

2

3

4

5

6

7

 
         #demo { 
         position 
         : 
         relative 
         ;  
         background-color 
         : 
         #ccc 
         ; 
         z-index 
         : 
         0 
         ;} 
        
 
         .column { 
         padding 
         : 
         10px 
         ;  
         width 
         : 
         200px 
         ;  } 
        
 
         .c 
         1 
         { 
         background-color 
         : 
         red 
         ; 
         position 
         : 
         absolute 
         ; 
         top 
         : 
         0 
         ; 
         left 
         : 
         0 
         ; 
         z-index 
         : 
         -1 
         ;} 
        
 
         #c 
         2 
         { 
         background-color 
         : 
         green 
         ; 
         position 
         : 
         absolute 
         ; 
         top 
         : 
         0 
         ; 
         right 
         : 
         0 
         ;} 
        
 
         #c 
         3 
         { 
         background-color 
         : 
         blue 
         ; } 
        
 
         #d 
         2 
         { 
         position 
         : 
         relative 
         ;  
         top 
         : 
         -10px 
         ; 
         z-index 
         : 
         2 
         } 
        
 
         #d 
         2 
         .c 
         1 
         { 
         position 
         : 
         static 
         ; 
         background-color 
         : yellow;} 
        

三、简要总结

	脱离文档	原占位保留	清除方式	z-index属性
浮动(float)	是	否	clear:both	不支持
相对定位(relative)	否	是	position:static	支持
绝对定位(absolute)	是	否	position:static	支持
固定定位(fixed)	是	否	position:static	支持