1. 免费模板网标签tags 更多...
          您的位置:首页 > div+css > 详解CSS相对定位和绝对定位

          详解CSS相对定位和绝对定位

          时间:2018-10-25 来源:网上收集 作者:Tony 阅读次数 tags定位相对定位绝对定位

          分享到:

          CSS 相对定位 - relative

          设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状,它原本所占的空间仍保留。

          相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位,它将出现在它所在的位置上。然后,可以通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动。

          如果将 top 设置为 20px,那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素,那么会在元素左边创建 30 像素的空间,也就是将元素向右移动。

          详解CSS相对定位和绝对定位

          <style type="text/css">
              div{float:left;width:50px;height:50px;border:1px solid #ccc;background:#eee}
              #box_relative {
                  position: relative;
                  left: 30px;
                  top: 20px;
              }
          </style>
          <div>框1</div>
          <div id="box_relative">框2</div>
          <div>框3</div>

          注意,在使用相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其它框。

          CSS 绝对定位 - absolute

          设置为绝对定位的元素框从文档流完全删除,并相对于其包含块定位,包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。

          绝对定位使元素的位置与文档流无关,因此不占据空间。这一点与相对定位不同,相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置。

          普通流中其它元素的布局就像绝对定位的元素不存在一样:

          详解CSS相对定位和绝对定位

          <style type="text/css">
              div{float:left;width:50px;height:50px;margin:5px;border:1px solid #ccc;background:#eee}
              #box_absolute {
                  position: absolute;
                  left: 30px;
                  top: 20px;
              }
          </style>
          <div>框1</div>
          <div id="box_absolute">框2</div>
          <div>框3</div>

          绝对定位的元素的位置相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块。

          对于定位的主要问题是要记住每种定位的意义。所以,现在让我们复习一下学过的知识吧:相对定位是“相对于”元素在文档中的初始位置,而绝对定位是“相对于”最近的已定位祖先元素,如果不存在已定位的祖先元素,那么“相对于”最初的包含块。

          注释:根据用户代理的不同,最初的包含块可能是画布或 HTML 元素。

          提示:因为绝对定位的框与文档流无关,所以它们可以覆盖页面上的其它元素??梢酝ü柚?z-index 属性来控制这些框的堆放次序。

          绝对定位的元素的位置相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块。

          通过例2可知,框2没有最近的已定位祖先元素,所以它的位置相对于最初的包含块,即body元素

          再来看下面的例子:

          <style type="text/css">
              div {float: left;width: 50px;height: 50px; margin: 5px;border: 1px solid #ccc; background: #eee;}
              #box_absolute {
                  position: absolute;
                  left: 30px;
                  top: 20px;
              }
          </style>
          <div>框1</div>
          <div style="position:relative">
              框3
              <div id="box_absolute">框2</div>
          </div>

          框2放入框3里面;给框3加上相对定位(position:relative),框2最新的已定位祖先元素就是框3;

          简单点,要使用绝对定位,就需要给上级的某个标签加一个position

          ps:CSS 定位属性介绍

          属性 描述
          position 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
          top 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
          right 定义了定位元素右外边距边界与其包含块右边界之间的偏移。
          bottom 定义了定位元素下外边距边界与其包含块下边界之间的偏移。
          left 定义了定位元素左外边距边界与其包含块左边界之间的偏移。
          overflow 设置当元素的内容溢出其区域时发生的事情。
          clip 设置元素的形状。元素被剪入这个形状之中,然后显示出来。
          vertical-align 设置元素的垂直对齐方式。
          z-index 设置元素的堆叠顺序

          本文地址:http://www.1198dvo.cn/bjrm/h3063.html

          猜你喜欢
          栏目推荐
          模板推荐

          Copyright:2014-2019 www.freemoban.com Corporation,All Rights Reserved 免费模板网 版权所有 鄂ICP备19005084号

          免责声明:本站部分资源来自互联网收集,版权归原创者所有,如果侵犯了你的权益,请通知我们,我们会及时删除侵权内容,谢谢合作!

          建站咨询QQ
          67期香香精准内部资料 乌恰县| 齐河县| 景泰县| 赣州市| 东辽县| 日土县| 屏山县| 海门市| 巢湖市| 宁德市| 拉萨市| 平顺县| 封开县| 巩留县| 山阴县| 文安县| 阿鲁科尔沁旗| 新化县| 莫力| 金平| 南华县| 鲁甸县| 措勤县| 遂昌县| 小金县| 仁寿县| http://www.qzottm.cn 岚皋县| 临泉县| 南京市| 保亭| 石棉县| 亳州市| 交城县| 阳东县| 徐汇区| 玉山县| 尚志市| 会泽县| 汝阳县| 阳谷县| 治县。| 岳西县| 英山县| 稷山县| 凤庆县| 临清市| 潜江市| 射阳县| 平舆县| 辰溪县| 揭东县| 雷波县| 漯河市| 兖州市| 东海县| http://oypdij.cn 古丈县| 资讯| 西青区| 五华县| 白河县| 盈江县| 额敏县| 吉木萨尔县| 和田市| 剑阁县| 运城市| 沂南县| 平谷区| 克山县| 颍上县| 嘉黎县| 万全县| 永寿县| 漠河县| 神池县| 革吉县| 衡东县| 塔城市| 太白县| 新闻| 司法| 邹平县| 彰武县| 昌邑市| 龙南县| 九龙城区| 峨山| 峨山| 合山市| http://www.bkqmer.cn 游戏| 塔城市| 花垣县| 梨树县| 阿勒泰市| 榆林市| 广南县| 唐山市| 金坛市| 云和县| 璧山县| 江川县| 昌吉市| 常州市| 屏山县| 德清县| 都兰县| 弥勒县| 宝兴县| 南郑县| 信阳市| 蒙城县| 贡山| 招远市| 龙口市| 襄城县| 邢台市| 杂多县| 田阳县| http://www.yhykaa.cn 梅州市| 丹棱县| 福海县| 镇平县| 乃东县| 南昌县| 台州市| 益阳市| 连平县| 安宁市| 永年县| 烟台市| 崇仁县| 吉安县| 囊谦县| 秦皇岛市| 嘉峪关市| 安平县| 平遥县| 垫江县| 蓬安县| 都匀市| 油尖旺区| 得荣县| 道孚县| 新宁县| 修武县| 邵武市| 宜兰市| http://ecvxxb.cn 泸水县| 南华县| 正安县| 海晏县| 定南县| 资源县| 乌拉特中旗| 渝北区| 凤翔县| 旬阳县| 门头沟区| 天津市| 兴宁市| 黄大仙区| 大悟县| 山东省| 库车县| 关岭| 抚远县| 高邑县| 屯留县| 新乡县| 自治县| 甘孜县| 油尖旺区| 商水县| 富阳市| 泰安市| http://zbipjt.cn 澄迈县| 德兴市| 全南县| 道真| 荥阳市| 江津市| 富民县| 肥东县| 克拉玛依市| 合江县| 兴义市| 永平县| 齐齐哈尔市| 文成县| 博湖县| 岳阳县| 涟源市|