zoukankan      html  css  js  c++  java
  • 直接写position:absolute,后面不加top和left等值,是什么意思?分两种情况

    href:https://blog.csdn.net/cherry_vicent/article/details/41778501

    用Div+CSS进行网站布局时,做一些浮动层等特殊特殊效果时要考虑到定位问题。

    这就要用到Position属性等。

    Position属性有四个值:static、fixed、absolute和relative,

    后面两个在布局中的定位里是经常用到的,顾名思义,absolute是指绝对定位

    即将对象从文档流中拖出,使用left,right,top,bottom等属性进行绝对定位,

    而其层叠通过z-index属性定义。此时对象不具有边距,但仍有补白和边框。

    ralative是指相对定位,就是依据left,right,top,bottom等属性在正常文档流中偏移位置。

    但是,怎么个绝对法,又怎么个相对法呢?

    以前我一直没有仔细去研究它,到具体应用时有时会有点迷糊,我相信很多朋友也会有这样的问题。

    今天我特意测试了一下,得出了以下结论:

    1、当Position属性值为Relative时对象原来占有的位置保留,其后面的对象按原来文档流仍然保持

    原来的位置

    Top的值表示对象相对原位置向下偏移的距离

    bottom的值表示对象相对原位置向上偏移的距离, 两者同时存在时,只有Top起作用。

    left的值表示对象相对原位置向右偏移的距离

    right的值表示对象相对原位置向左偏移的距离, 两者同时存在时,只有left起作用。

    2、当Position属性值为absolute时对象从文档流中抽取出来,原占有的位置被后面的对象顶替

    上来

    Top的值表示对象上边框与浏览器窗口顶部的距离

    bottom的值表示对象下边框与浏览器窗。口底部的距离两者同时存在时,只有Top起作用;

    如果两者都未指定,则其顶端将与原文档流位置一致,即垂直保持位置不变。

    left的值表示对象左边框与浏览器窗口左边的距离

    right的值表示对象右边框与浏览器窗口右边的距离两者同时存在时,只有left起作用;

    如果两者都未指定,则其左边将与原文档流位置一致,即水平保持位置不变。 

    在Position属性值为absolute的同时,如果有一级父对象(无论是父对象还是祖父对象,

    或者再高的辈分,一样)的Position属性值为Relative时,则上述的相对浏览器窗口定位

    将会变成相对父对象定位,这对精确定位是很有帮助的。

  • 相关阅读:
    简单跨域请求和带预检的跨域请求
    springmvc@RequestMapping-params参数规则
    ocketMQ概念模型
    java agent 详细介绍 -javaagent参数
    Spring使用多个 <context:property-placeholder/>
    什么时候会进行 SpringMVC重定向保存参数(FlashMap)?
    springMVC 数据模型相关注解 可注释类型 ModelAttribute SessionAttributes InitBinder
    Springmvc 异步处理
    Java并发包之阶段执行之CompletionStage接口
    Spring Web Flux 相关概念
  • 原文地址:https://www.cnblogs.com/purple1/p/8922697.html
Copyright © 2011-2022 走看看