zoukankan      html  css  js  c++  java
  • CSS+DIV定位分析(relative,absolute,static,fixed)

    各个属性值的定义:

    1、static:默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。

    2、relative:生成相对定位的元素,通过top,bottom,left,right的设置相对于其正常位置进行定位。可通过z-index进行层次分级。

    3、absolute:生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。

    4、fixed:生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。

    relative与absolute的主要区别:

    首先,是上面已经提到过的在正常流中的位置存在与否。

    其次,relative定位的层总是相对于其最近的父元素,无论其父元素是何种定位方式。如图3

    图中,红色背景层为relative定位,其直接父元素绿色背景层为默认的static定位。红色背景层的位置为相对绿色背景层top、left个20元素。而如果红色背景层定位为absolute,则情形如图4:

     

    CSS+DIV定位分析(relative,absolute,static,fixed) - 心碎乌托邦 - love_heartbreaking

     

    可以看到,红色背景层依然定义top:20px;left:20px;但其相对的元素变为定位方式为absolute或relative的黄色背景层。

    因此,对于absolute定位的层总是相对于其最近的定义为absolute或relative的父层,而这个父层并不一定是其直接父层。如果其父层中都未定义absolute或relative,则其将相对body进行定位,如图5:

    CSS+DIV定位分析(relative,absolute,static,fixed) - 心碎乌托邦 - love_heartbreaking

     

    除top、left、right、bottom定位外,margin属性值的定义也符合上述规则。

  • 相关阅读:
    约瑟夫环问题拓展 C/C++
    C/C++之STL简介
    详解约瑟夫环问题 C/C++
    HC-SR04超声波传感器
    TCRT5000 红外传感器
    win10的docker无法运行mysql的image,Public Key Retrieval is not allowed
    如何将docker默认的安装位置从C盘改为D盘?
    免费PDF阅读器
    A1B2B3
    动态代理
  • 原文地址:https://www.cnblogs.com/liaojie970/p/7002635.html
Copyright © 2011-2022 走看看