CSS中的position定位

作者: 六个周 | 来源:发表于2018-09-25 23:29 被阅读5次
1.HTML中的三种布局方式
  • 标准流
  • 浮动
  • 定位

2.HTML中的两大元素
  • 块级元素 divH1~H6tableul li olp
  • 内联元素 spanimgainput

3.position属性的意义
  • position属性决定了元素将如何定位
  • 通过top、right、bottom、left实现位置
position中的可选参数
  • static
  • relative----- 相对定位
  • absolute----- 绝对定位、脱离文档流,起作用必须与left、top一起使用(注:相对于窗口定位,设置body高度没有用)

test(absolute):想象demo所在位置

<style>
    .par{
      height:2500px; 
      border:1px solid red;
      width:1000px;
      margin-top:100px;
      margin-left:100px;
      background:blue;  
   }
    .demo{
      height:100px;
      width:100px;
      background:red;
      position:absolute;
      right:100px;
      bottom:100px;
  }
</style>
<body>
     <div class="par">
        <div class="demo"></div>
    </div>
<body>
  • fixed -----脱离正常标准流、不受制与父元素
  • inherit----继承

4. z-index:可以设置元素的叠加顺序,但依赖·定位属性·
  • z-index大的元素会覆盖z-index小的元素
  • z-index为auto的元素不参与层级比较
  • z-index为负值,元素被普通流中的元素覆盖

相关文章

  • css粘性定位position: sticky

    css粘性定位position:sticky问题采坑position: sticky 详解(防坑指南)CSS中po...

  • CSS - 定位

    CSS 中的层级概念 CSS中分为3层 最上层:定位元素层(position:relative、position:...

  • 关于CSS定位

    在CSS中关于定位的内容是:position:relative(相对定位)absolute(绝对定位) ...

  • 【图解CSS#Position】

    关于CSS position,来自MDN的描述: CSS position属性用于指定一个元素在文档中的定位方式。...

  • 关于css定位

    css中position是定位的属性,其属性值如下:

  • CSS定位(相对定位,固定定位,绝对定位)

    在CSS中,可以使用position属性来定位元素。position 属性规定元素的定位类型。 属性值: abso...

  • CSS position 详解

    CSS 中的 position 属性用来设置元素的定位方式。 position 的值有 static、relati...

  • css中position定位

    css中有三种定位:static、fixed、relative、absolute static是正常定位 fixe...

  • css学习笔记:定位position

    css position定位 position选值类型: static:默认状态,不开启定位 relative:相...

  • CSS中的position定位

    1.HTML中的三种布局方式 标准流浮动定位 2.HTML中的两大元素 块级元素 div、H1~H6、t...

网友评论

    本文标题:CSS中的position定位

    本文链接:https://www.haomeiwen.com/subject/rotroftx.html