zoukankan      html  css  js  c++  java
  • css中的定位

    css中有三种基本的定位机制:普通流、浮动流、定位流

    1、普通流:上下排列的布局 (大部分情况)

    2、浮动流:左右排列的布局 (大部分情况)

    3、定位流:层叠(叠加)排列布局(大部分情况)

    定位属性

    position:检索或设置对象的定位方法

    • static :默认值,没有定位,可以用于取消元素之间的定位设置

    • relative:相对定位(参照物是自身所在的位置)

      • 如果没有定义偏移量,对元素本身没有任何影响

      • 不使元素脱离文档流,空间是会保留

      • 不影响其他元素布局

      • left、top、right、bottom是相对于当前元素自身进行偏移,不能独自存在,必须配合定位元素进行使用

    • absolute:绝对定位(参照物:包含块-该元素的祖先级元素)

      • 使元素完全脱离文档流

      • 使内联元素支持宽高(让内联具备块特性)

      • 使块元素默认宽根据内容决定(让块具备内联属性)

      • 如果有定位祖先元素相对于定位祖先元素发生偏移,没有定位祖先元素相对于整个文档发生偏移(绝对、相对、固定)

        • 注:如果祖先元素中有多个元素具备定位属性,那么是以离自己最近的祖先元素进行偏移

      • 注:默认情况下是相对于可视窗口进行定位的。

      • 包含块:包含块是绝对定位的基础

        • 绝对定位元素会根据包含块进行绝对定位,默认情况下,浏览器的可视窗口是一个大的包含块,默认情况下,绝对定位元素会相对浏览器的可视窗口进行定位;如果他的祖先级元素定义里包含块,那他就最近的祖先级元素进行绝对定位。

        • 如何给祖先级元素定义成包含块:给祖先级元素添加position:relative/absolute/fixed。

    • 绝对定位和相对定位的区别

      • 1、相对定位的参照物是自己本身所在的位置,绝对定位的参照物是包含块

      • 2、相对定位是不会脱离文档流的,而且不会对页面的布局产生影响;绝对定位是会脱离文档流的,之前的位置就不再占用,后面的内容会把位置补上去

    • z-index:auto/ number 检索或设置对象的层叠顺序

      • auto:默认值

      • number:无单位的整数值。可为负数

      • 没有设置z-index时,最后写的对象优先显示在上层,设置后,数值越大,层越靠上

      • 注:他只针对具有定位属性的元素起作用

    • fixed:固定定位(参照物:始终都是相对于整个浏览器窗口进行固定定位的)

      • 使元素完全脱离文档流

      • 是内联元素支持宽高(让内联具备内联块属性)

      • 使块元素默认宽根据内容决定(让内联具备内联块属性)

      • 相对于整个浏览器窗口进行偏移,不受浏览器滚动条的影响,不会受到祖先元素的影响

         

    • sticky 黏性定位

      • 在没有到达指定位置的时候,是没有定位效果的,到达了指定位置,就变成了固定模式。

      • 只支持top和left方向

      • 设置了sticky的元素,在屏幕范围时该元素的位置并不受定位影响(设置top、left等属性无效),当该元素的位置将要移出偏移范文时,定位又会变成fixed,根据设置的left、top等属性成固定位置的效果。

  • 相关阅读:
    如何用CSS实现中间自适应,两边定宽三栏布局
    [转]通过Spring Boot三分钟创建Spring Web项目
    [转]Java Web笔记:搭建环境和项目配置(MyEclipse 2014 + Maven + Tomcat)
    [转]单元测试、集成测试、确认测试、系统测试、验收测试
    [转]maven全局配置文件settings.xml详解
    [转]解决-Dmaven.multiModuleProjectDirectory system property is not set. Check $M2_HOME environment variable and mvn script match.
    [转]PO BO VO DTO POJO DAO概念及其作用(附转换图)
    [转]如何提升你的能力?给年轻程序员的几条建议
    从oracle导出数据成csv,将csv导入mongodb问题
    Windows下Mongodb启动问题
  • 原文地址:https://www.cnblogs.com/shewill/p/13051384.html
Copyright © 2011-2022 走看看