专栏首页十月梦想css的position定位详解

css的position定位详解

  1. position元素定位四个取值:static(静态默认文档流),relative(相对定位,相当于原文档流进行定位),absolute(绝对定位,相当于上个已经定位的父级元素进行定位),fixed(相当于浏览器窗口进行固定)
  2. relative情况:相对定位,会根据之前进行位置偏移,但是原来位置留着空白,保留原来文档流
    1. 代码详情:
    2. html部分: <div id="d1">列表1 <div id="d11">列表1-1</div></div> <div id="d2">列表2</div> <div id="d3">列表3</div>
    3. css部分: div{ width:200px; height:200px; background-color:green; margin-top:20px; } #d1{ position:relative; top:30px; left:200px;} 3.absolute情况:相绝对定位,根据父级已经定位的元素进行偏移,如果父级元素没有定位以body进行偏移,偏移后不占用文档流,偏移后,下面的元素进行部位上去
      1. 父级元素没有定位的absolute定位情况:
    1. 代码详情
      1. html代码: <div id="d1">列表1 <div id="d11">列表1-1</div></div> <div id="d2">列表2</div> <div id="d3">列表3</div> css部分: div{ width:200px; height:200px; background-color:green; margin-top:20px; } #d1{ position:relative; top:30px; left:200px; background:blue; }

    ii.父级元素定位(相对relative)的absolute定位情况:

    iii.  父级元素定位(绝对定位absolute)的子元素absolute定位情况:都不保留原文档流空白

    iii.  父级元素定位(绝对定位absolute)的子元素relative定位情况:父元素原文档流空白,子元素保留原来文档流空白

    4.fixed固定:相当于浏览器窗口固定(不随导航条位置改变)

    5.static默认正常文档流,没有变化

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 框模型

         元素框的实际宽度:width+左右外边距+左右border边框+左右内边距

    十月梦想
  • 一天带入门到放弃vue.js(三)

    自己新建的标签赋予特殊功能的是组件,而指定是在标签上使用类似于属性,以v-name开头,v-on,v-if...是系统指令! v-是表示这是vue的指令if,f...

    十月梦想
  • box-sizing

            在通常的网页布局都是由一个个div等元素构成盒子形成形形色色的网页结构,在网页的构成中我们还要进行各种元素的修饰,叫做:盒子模型.

    十月梦想
  • CSS 定位布局 - 相对、绝对、固定三种定位

    文档流,是指盒子按照html标签编写的顺序依次从上到下,从左到右排列,块元素占一行,行内元素在一行之内从左到右排列,先写的先排列,后写的排在后面,每个盒子都占据...

    Devops海洋的渔夫
  • CSS基础

    CSS 语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。 1 2 3 4 5 6 7 8 9 ''' ...

    用户1214487
  • web前端面试中10个关于css高频面试题,你都会吗?

    BFC(Block Formatting Context),块级格式化上下文,是一个独立的渲染区域,让处于 BFC 内部的元素与外部的元素相互隔离,使内外元素的...

    coder_koala
  • margin-top属性

    这个属性对于不可替换的 inline 标签没有效果,比如 <tt> 或者 <span>。

    Html5知典
  • css基础

        行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势,不推荐使用。

    超蛋lhy
  • 前端学习(49)~offset相关属性和匀速动画(含轮播图实现)

    offsetWidth 和 offsetHight:获取元素的宽高 + padding + border,不包括margin。如下:

    Vincent-yuan
  • 前端开发面试题总结之——CSS3

    ---- 相关知识点 布局、 浮动、 盒子模型、 弹性和模型、 选择器优先级、 居中定位、 兼容性、 hack写法...... 题目&答案 如何理解CSS的盒子...

    用户1667431

扫码关注云+社区

领取腾讯云代金券