您现在的位置是：网站首页> 编程资料编程资料

使用CSS的position属性控制页面布局的入门教程CSS position:absolute全面了解CSS 定位之position全面了解使用CSS3的ruby-position固定注音位置的用法示例总结CSS的position定位属性在使用的一些重点图解CSS中position属性的定位用法css position 设置元素的定位方式详解

2023-10-22 256人已围观

简介 这篇文章主要介绍了使用CSS的position控制页面布局的入门教程,讲解了position几个常用值在布局中的作用,需要的朋友可以参考下

postion 属性定义了一个元素在页面布局中的位置以及对周围元素的影响。该属性共有5个值：

position: absolute
position: relative
position: fixed
position: static
position: inherit
本文主要详细讨论 position 属性的前三个值，首先大概讲解下后两个值：

static

static 为 position 属性的默认值，static 元素会遵循正常的文档流，且会忽略 top,bottom,left,right 等属性。

inherit

inherit 值如同其他 css 属性的 inherit 值，即继承父元素的 position 值。

absolute

absolute 元素将会脱离正常的文档流，所以 其周围的元素将会忽略它的存在。如同 absolute 元素的 display 属性被设为了 none 一样。此时，我们可以使用 top,bottom,left,right 等属性对 absolute 元素进行绝对定位。一般情况下定义两个属性，top 或 bottom,left 或 right。
这个绝对定位需要稍微理解下，因为这里容易与 relative 产生混淆。
例如，当对 absolute 元素添加 left:10px 定位后，这个 left 究竟是对哪个元素而言呢？其实，此时将会往上查找 absolute 元素的第一个父元素，如果该父元素的 position 值存在（且不为 static）,那么这个 left:10px 就是根据该父元素进行的定位，否则将会继续查找该父元素的父元素，一直追溯到某个父元素具备不为 static 的 position 值为止，如果不存在满足条件的父元素，则会根据最外层的 window 进行定位。

CSS Code复制内容到剪贴板
  1. "position: absolute">Im an absolute element
  
  • Im a default element
      

    • 2016428112744860.jpg (213×33)//直接忽略 absolute 元素的存在

    relative

    relative 元素遵循正常的文档流，所以周围元素不会忽略它的存在，relative 元素同样支持 top,bottom,left,right 等属性。当我们使用 top,bottom,left,right等属性对 relative 元素进行相对定位时的效果有点类似于 margin 属性达到的效果，但是区别在于， relative 元素周围的元素将会忽略 relative 元素的移动。我们注意，当 relative 元素未使用定位属性进行相对定位时，它不会被周围的元素忽略，但利用定位属性进行定位后，周围的元素会忽略 relative 元素的移动，它们会认为 relative 元素仍然在原来的位置，并未进行移动，我们用个例子来说明：

    CSS Code复制内容到剪贴板
    1. "position: relative">Im a relative element
      
  • Im a default element
      

    • 2016428112813677.jpg (214×50)//并未忽略 relative 元素的存在

    全选复制放进笔记

    CSS Code复制内容到剪贴板
    1. "position: relative;top:10px">Im a relative element
      
  • Im a default element
      

    • 2016428112844259.jpg (213×43)//忽略了 relative 元素的移动

    fixed

    fixed 元素将会脱离正常的文档流，所以它与 absolute 元素很相似，同样会被周围元素忽略，支持 top,bottom,left,right 属性，但两者仍有很大不同。
    首先，fixed 元素定位与它的父元素无任何关系，它永远是相对最外层的 window 进行定位的。
    第二，fixed 元素正如它的名字一样，它是固定在屏幕的某个位置，它不会因为屏幕的滚动而消失。

    全选复制放进笔记

    CSS Code复制内容到剪贴板
    1. "height:1000px">   
    2.   "position: absolute;">Im an absolute element
      
  •   "position: fixed;">Im a fixed element
    •   
  •   
    Im a default element
      
  •   

    • 2016428112918323.jpg (220×41)//如同 absolute，fixed元素也被周围元素忽略

    因为外层 div 高度超过一屏，所以现在我们往下滚动屏幕。
    2016428112941913.jpg (212×30)//只有 fixed 元素未因为屏幕滚动而消失，因为它是“固定”的

    z-index

    为什么要在这里提到 z-index 属性呢？那是因为 z-index 属性只对定位元素有效，即 position 值为 absolute,relative,fixed 时才有效。我们首先了解下什么叫 z-index。
    2016428113000734.png (465×419)

    从上图我们不难发现 z-index 值代表的是元素的堆叠顺序，值越高则显示顺序越优先。

    CSS Code复制内容到剪贴板
    1. "position: absolute;z-index:1">Im an absolute element
      
  • "position: fixed;z-index:2">Im a fixed element
    •   

    2016428113035154.jpg (211×32)//fixed 元素 z-index 比 absoulute 元素高，所以显示在前面

    （我把背景色调为非透明，这样可以看得更清楚），假如 z-index 值相同会出现什么情况呢？

    CSS Code复制内容到剪贴板
    1. "position: absolute;z-index:1">Im an absolute element
      
  • "position: fixed;z-index:1">Im a fixed element
    •   

    2016428113104360.jpg (211×32)//z-index 值相同，仍然显示为 fixed 元素

    所以我们知道，当 z-index 值相同时，后加载的元素显示优先。

    综合例子
    HTML 

    XML/HTML Code复制内容到剪贴板
    1. <div id="example">  
    2.     <div id="div-before">  
    3.      <p>id = div-beforep>  
    4.     div>  
    5.     <div id="div-1">  
    6.      <div id="div-1-padding">  
    7.       <p>id = div-1p>  
    8.       <div id="div-1a">  
    9.        <p>id = 提示： 本文由神整理自网络，如有侵权请联系本站删除！
      本站声明：
      1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
      2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！

      上一篇：解析CSS编写中的属性优先级问题详解CSS中的选择器优先级顺序详解CSS中的选择器优先级及样式层叠问题解决CSS z-index 层级关系优先级的概念CSS中的各种选择器与样式优先级小结四种CSS常用的选择器使用方法和注意事项css优先级计算方法(推荐)

      下一篇：CSS3近阶段篇之酷炫的3D旋转透视 CSS3让登陆面板3D旋转起来CSS3 3D旋转rotate效果实例介绍 CSS3实现的一款迷人3D木块旋转动画CSS3实现酷炫的3D旋转透视效果

    相关内容

    点击排行

    本栏推荐

    猜你喜欢

    -六神源码网