zoukankan      html  css  js  c++  java
  • position详解

    本文旨在普及一下position的用法,CSS中position的使用率相当之高,对于新入行的小白,不仅要知其然,还要知其所以然。

    position(定位类型),主要有4种属性值 : static、fixed、relative、absolute,任何元素的默认position属性值都是static(静态)。元素可以使用TRBL定位,但必须先设定position属性,否则无法发挥效果。根据不同的position属性值,TRBL作用不同。

    下面是各个属性值的简单介绍:

    1. static,为position的默认属性值,即没有定位,元素出现在正常的流中,静态定位的元素不会受到top, bottom, left, right影响。
    2. fixed:元素位于浏览器窗口固定位置,即使窗口滚动也不会移动;Fixed定位使元素位置脱离文档流,因此不占据空间;Fixed定位的元素可以和其他元素重叠。
    3. absolute(绝对定位):其元素位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于<html>即浏览器的左上角,配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位; 
    4. relative(相对定位):是相对于元素的正常位置,配合TRBL进行定位。相对定位时存在元素重叠现象,但原本所占的空间不会改变。相对定位元素经常被用来作为绝对定位元素的容器块。

     absolute(绝对定位详解):

    • 绝对定位使元素可以放在页面上的任何位置,元素位置与文档流无关,因此不占据空间;如果两个定位元素重叠,没有指定z - index(设置元素的堆叠顺序),最后定位在HTML代码中的元素将被显示在最前面。

    绝对定位可能出现的情况:

            若父级没有设定position属性或没有父级元素:

           (1)没有TRBL--->以浏览器左上角原点,若存在文本则以它前面的最后一个文字的右上 角为原点进行定位但是不断开文字,覆盖于上方。

           (2)设定TRBL--->以浏览器左上角原点进行定位,位置将由TRBL决定。

            若父级设置了position属性(无论是absolute还是relative):

           (1) 没有TRBL--->以父级的左上角为原点

           (2) 设定TRBL--->以父级的左上角为原点进行定位,位置由TRBL决定,父级的padding对其无影响

    小结1:若想把一元素在其父级元素中绝对定位,需满足两个条件:1.设定TRBL 2.父级设定Position属性

    这个总结可以保证你在用绝对定位布局页面的时候,不会错位,页面不会随着浏览器的大小或者显示器分辨率的大小而改变。只要有一点不满足,元素就会以浏览器左上角为原点,这就是初学者容易犯错的一点。 

    小结2:若用position来布局页面,父级元素的position属性必须为relative,而定位于父级内部某个位置的元素,最好用absolute,因为它不受父级元素的padding属性的影响。

    相对定位可能出现的情况:

        若父级没有设定position属性或没有父级元素:

           (1)没有TRBL--->以浏览器左上角为原点,若存在文本,则以文本的底部为原始点进行定位并将文字断开

           (2)设定TRBL--->以父级的左上角为原点进行定位

        若父级设置了position属性(无论是absolute还是relative):

           (1)没有TRBL--->以父级的左上角为原点进行定位

           (2)设定TRBL--->以父级的左上角为原点进行定位,位置由TRBL决定。如果父级有Padding属性,则以内容区域的左上角为原点,进行定位

    小结3:相对定位时无论父级存在不存在,无论有没有TRBL,均是以父级或浏览器的左上角进行定位,但是父级的Padding属性会对其影响。

    小结4:可以将position属性为relative的DIV视成可以用TRBL进行定位的的普通DIV,或者说只要将我们平时布局页面的div的CSS属性中加上position:relative后,就不仅可以用float布局页面,还可以用TRBL进行布局页面了,但position属性为absolute不可以用来布局页面,因为如果用来布局的话,所有的DIV都相对于浏览器的左上角定位了,所以只能用于将某个元素定位于属性为relative的元素的内部某个位置。

    总结:

    • relative属性可以用来布局页面,absolute属性配合TRBL用来定位某元素在父级中的位置,
    • 若用position来布局页面,父级元素的position属性必须为relative,而定位于父级内部某个位置的元素,最好用absolute,因为它不受父级元素的padding的属性影响。

    http://www.runoob.com/css/css-positioning.html

     
    要么生,要么死
  • 相关阅读:
    poj 2418 Hardwood Species
    hdu 3791 二叉搜索树
    九度oj 1544 数字序列区间最小值
    九度oj 1525 子串逆序打印
    九度oj 1530 最长不重复子串
    九度oj 1523 从上往下打印二叉树
    P1190 接水问题
    P1179 数字统计
    P1083 借教室
    P1079 Vigenère 密码
  • 原文地址:https://www.cnblogs.com/llljpf/p/6635201.html
Copyright © 2011-2022 走看看