zoukankan      html  css  js  c++  java
  • css 页面定位position

    position的四个属性值

    relative

    absolute

    fixed

    static

    参看实例
    <div id="parent">
      <div id='sub1'>sub1</div>
      <div id="sub2">sub2</div>
    </div>
    

    relative相对定位

    relative 属性相对比叫简单,我们要搞清楚它是相对哪个对象来进行偏移的。答案是它本身的位置。
    上面的代码中sub1和sub2是同级关系,如果设定sub1一个relative属性,比如设置css代码如下
    #sub1
     {
      position:relative;
      padding:5px;
      top:5px;
      left:5px;
     }
    我们可以这样理解,如果不设置relative属性,sub1的位置按照正常的文档流,它应该处于某个位置。
    但当设置sub1为postion为relative后,将根据top,right,bottom,left的值按照它理应所在的位置进行偏移,
    relative的"相对的"意思也正是体现于此
    ​
    因此,只需要记住,sub1如果不设置relative时它应该在哪里,一旦设置后,就按照它理应在的位置进行偏移
    随后的问题是:sub2的位置又在哪里呢?
    答案:它原来在哪里,现在就在哪里,它的位置不会应为sub1增加了position的属性而发生改变
    如果此时把sub2的position也设置为relative,或发生什么现象?
    此时依然和sub1一样,按照它原来的位置进行偏移。
    注意relative的偏移是基于对象的margin的左上侧的。
    

    absolute绝对定位

    有人说position的属性设置为absolute后,总是按照浏览器窗口来进行定位的,这其实是错误的,实际上,这是fixed属性的特点。
    当sub1的postion设置为absolute后,其到底以谁为对象进行偏移呢。
    1)当sub1的父对象(或曾祖父,只要是父级对象) parent也设置了position属性,且position的属性值为absolute或relative时,
    也就是说,不是默认值得情况,此时sub1按照这个parent来进行定位。
    note: 对象虽然确定好了,但有些细节需要注意,那就是我们到底以parent的哪个定来进行定位呢?
     如果是parent设定了margin,border,padding等属性,那么这个定位将忽略padding,
    将会从padding开始的地方(即从padding的左上角开始)进行定位,这与我们会想当然的以为会以margin的左上端开始定位的想法不同。
    接下来的问题是:sub2的位置到哪里去了呢?
    由于当position设置为absolute后会导致sub1溢出正常的文档流,就像它不属于parent一样,它漂浮了起来,
    在DreamWeaver中把它称为"层",其实意思一样。
    此时sub2将获得sub1的位置,它的文档流不再基于sub1,而是直接从parent开始。
    ​
    2) 如果sub1不存在有着position属性的父对象,那么就会以body为定位对象,按照浏览器的窗口进行定位。
    

    fixed固定定位

    fixed是特殊的absolute,即fixed总是以body为定位对象的,按照浏览器的窗口进行定位
    

    static静态定位

    position的默认值,一般不设置position属性时,会按照正常的文档流进行排列
    

    absolute和fiex的区别

    1)absolute的相对位置分为两种情况,在相对于body的情况下
     a) 没有滚动条的情况下没有差异
     b) 在有滚动条的情况下 fixed定位不会随滚动条移动而移动,而aboslute则会随滚动条移动
    
  • 相关阅读:
    PAT Advanced 1067 Sort with Swap(0, i) (25分)
    PAT Advanced 1048 Find Coins (25分)
    PAT Advanced 1060 Are They Equal (25分)
    PAT Advanced 1088 Rational Arithmetic (20分)
    PAT Advanced 1032 Sharing (25分)
    Linux的at命令
    Sublime Text3使用指南
    IntelliJ IDEA创建第一个Groovy工程
    Sublime Text3 安装ftp插件
    Sublime Text3配置Groovy运行环境
  • 原文地址:https://www.cnblogs.com/ssgao/p/8867770.html
Copyright © 2011-2022 走看看