zoukankan      html  css  js  c++  java
  • 绝对定位元素若无已定位的祖先元素,它是相对于什么进行定位的?

    绝对定位元素若无已定位的祖先元素,它是相对于什么进行定位的?

    绝对定位的元素的位置相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块。

    在CSS中,有事一个元素的位置和尺寸的计算都相对于一个矩形,这个矩形被称作包含块。包含块是一个相对的概念,比如子元素的初始化布局总是在父元素的左上角,这就是一个相对的概念。其中父元素就是一个参照物,但实际上这些元素都是根据包含块所在的位置进行布局,每个元素都会生成一个包含块,但这个包含块是虚无的,你看不到也摸不着,只是一个概念。

    包含块的最主要的作用就是给它里面的元素一个位置上的参照也就是它应该从哪里开始摆放。包含块并不会限制它里面元素的大小如果里面的元素比包含块大,那么超出的部分就会被溢出。一个元素的位置和尺寸与它的包含块息息相关,而元素会为它的子孙元素创建包含块,但这并不代表这个包含块就是它的父元素,再次强调包含块只是一个概念。包含块最终的样子是由元素自身和它的祖先元素的样式等决定的。

    包含块的创建:

    1.在HTML中,根元素的包含块叫作初始包含块,具体创建由客户端决定

    2.当定位值为fixed,则包含块由视口创建

    3.当定位值为relative、static或没有设置定位属性,则包含块由最近的父元素或祖先元素创建

    4.当定位值为absolute,则包含块由最近的定位值relative、absolute、fixed创建,如果没有定位的祖先元素,则包含块为初始包含块(具体由客户端来决定)

    5.当祖先元素是行内元素时,那么包含块取决于父元素或祖先元素的direction属性

    初始包含块:

    1. 根元素的包含块是一个矩形,叫做初始化包含块;

    2. 对于 【连续媒体】就是,初始化包含块的 尺寸等于viewport的尺寸,起点是canvas的原点;

    3. 初始化包含块的方向(direction)等同于根元素的方向;

    4. 初始化包含块不是viewport,只是尺寸一样;

  • 相关阅读:
    git使用教程PDF版
    Everything(一款用于检索硬盘文件的工具)
    Animate.css(一款有意思的CSS3动画库)
    bootstrap3中container与container_fluid的区别
    河北省重大技术需求征集系统设计(七稿)第九天
    河北省重大技术需求征集系统设计(七稿)第八天
    河北省重大技术需求征集系统设计(七稿)第七天
    河北省重大技术需求征集系统设计(七稿)第六天
    河北省重大技术需求征集系统设计(七稿)第五天
    河北省重大技术需求征集系统设计(七稿)第四天
  • 原文地址:https://www.cnblogs.com/f6056/p/11283293.html
Copyright © 2011-2022 走看看