zoukankan      html  css  js  c++  java
  • css布局学习笔记之position属性

    position属性用于定位元素,它的几个值分别如下:

    1,static

      static 是默认值。任意 position: static; 的元素不会被特殊的定位。一个 static 元素表示它不会被“positioned”,一个 position 属性被设置为其他值的元素表示它会被“positioned”

    2,relative

      relative 相对于自己在文档流中本来的位置进行定位,设置toprightbottomleft 属性会使其偏离其正常位置。不脱离文档流,其他的元素则不会调整位置来弥补它偏离后剩下的空隙。

    3,fixed

      一个固定定位(position属性的值为fixed)元素会相对于视窗来定位,这意味着即便页面滚动,它还是会停留在相同的位置。和 relative 一样, toprightbottomleft 属性都可用。脱离文档流,不会保留它原本在页面应有的空隙。

    4,absolute

      absolutefixed 的表现类似,除了它不是相对于视窗而是相对于最近的“positioned”祖先元素。如果绝对定位(position属性的值为absolute)的元素没有“positioned”祖先元素,那么它是相对于文档的 body 元素,并且它会随着页面滚动而移动。

      多个同级absolute元素会重叠在一起,重叠是按代码本身顺序排列,越后输入的其越靠前(浮在上面)。除非元素设置了z-index属性,z-index属性值越大越靠前。

     

    这些都是理论知识,加上一点小练习就能够理解,但是具体的用处,还有待多看多练。做个小小的笔记,记录自己的学习。

  • 相关阅读:
    Python爬取豆瓣电影top
    那些年我们踩的坑,依然有人在踩坑
    工行ICBC_WAPB_B2C支付接口
    SharePoint2016配置工作流开发环境
    Html+Css实现梯形选项卡
    The Ribbon Tab with id: "Ribbon.Read" has not been made available for this page or does not exist.
    SharePoint自动初始化网站列表
    常用的SharePoint命令行代码
    SharePoint开启错误提示
    Asp.Net写入读取Xml(处理文件权限)
  • 原文地址:https://www.cnblogs.com/huhy/p/3559292.html
Copyright © 2011-2022 走看看