zoukankan      html  css  js  c++  java
  • relative、absolute和float

      position:relative和position:absolute都可以改变元素在文档中的位置,都能激活元素的left、top、right、bottom和z-index属性。(默认这些属性未激活,设置了也无效)

      设置position:relative和position:absolute都会让元素浮起来,会改变正常情况下的文档流。

      不同:

      position:relative会保留自己在z-index:0层的占位,left、top、right、bottom值是相对于自己在z-index层的位置。

      position:absolute会完全脱离文档流,不再z-index:0层保留占位符,其left、top、right、bottom值是相对于自己最近的一个设置了position:relative或position:absolute的祖先元素的,如果祖先元素全都没有设置,那么就相对于body元素。

      float也能改变文档流,不同的是,float不会让元素浮到另一个元素上面,它仍然让元素在z-index:0层排列,只能通过float:left和float:right来控制元素在同一层里"左浮"和"右浮"。float会改变正常的文档流排列,影响周围元素。

      position:absolute和float会隐式的改变display类型,不论之前什么类型的元素(display:none除外),只要设置了position:absolute和float中任何一个,都会让元素以display:inline-block的方式显示:可以设置长宽,默认宽度并不占满父元素。就算显示的设置display:inline或者display:block,也仍然无效(IE6双倍边距BUG利用display:inline解决)。

      position:relative却不会隐式改变display类型。

  • 相关阅读:
    异步请求 ajax的使用详解
    关于JAVA-JS-JSP之间传值的各种方法
    C# 对List<T>取交集、连集及差集
    MVC解决方案发布IIS 登录页面需要输入两次帐号问题
    sqlserver查看被锁表、解锁
    C#中using关键字的作用及用法
    Bootstrap组件On和Off语法
    HtmlString类创建HTML Hepler 扩展MVC TextBox组件
    Js运算符优先级
    ajax调用webservice(二) 跨域。
  • 原文地址:https://www.cnblogs.com/fu277/p/2393519.html
Copyright © 2011-2022 走看看