请选择 进入手机版 | 继续访问电脑版

巅峰霸主

 找回密码
 立即注册

QQ登录

只需一步,快速开始

CSS定位属性position:static|relative|fixed|absolute使用详解

  [复制链接] [添加相关主题]
godkings 发表于 2019-10-10 22:19:11 | 显示全部楼层 |阅读模式
CSS - 定位属性position使用详解(static、relative、fixed、absolute):
  • position: static(默认值)
  • position: relative(相对定位)
  • position: absolute(绝对定位)
  • position: fixed(固定定位)


一、position 属性介绍
(1)position 属性自 CSS2 起就有了,该属性规定元素的定位类型。所有主流浏览器都支持 position 属性。
(2)position 的可选值有四个:static、relative、absolute、fixed。下面分别进行介绍。(其实还有个 inherit,不过这个是 IE 特有的,这里就不做讨论)

二、position: static(默认值)
1,基本介绍
(1)static 是默认值。表示没有定位,或者说不算具有定位属性。
(2)如果元素 position 属性值为 static(或者未设 position 属性),该元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。

2,使用样例
  1. <style>
  2.   div {
  3.     width: 200px;
  4.     height: 100px;
  5.     background-color: #C9FFFF;
  6.   }
  7. </style>

  8. <div></div>
  9. <input type="text"/>
复制代码


三、position: relative(相对定位)
1,基本介绍
(1)relative 生成相对定位的元素,相对于其正常位置进行定位。
(2)相对定位完成的过程如下:
首先按默认方式(static)生成一个元素(并且元素像层一样浮动了起来)。
然后相对于以前的位置移动,移动的方向和幅度由 left、right、top、bottom 属性确定,偏移前的位置保留不动。

2,样例代码
下面代码将文本输入框 position 设置为 relative(相对定位),并且相对于默认的位置向右、向上分别移动 15 个像素。

  1. <style>
  2.   div {
  3.     width: 200px;
  4.     height: 100px;
  5.     background-color: #C9FFFF;
  6.   }
  7.    
  8.   input {
  9.     position: relative;
  10.     left: 15px;
  11.     top: -15px;
  12.   }
  13. </style>

  14. <div></div>
  15. <input type="text" />
复制代码


四、position: absolute(绝对定位)
1,基本介绍
(1)absolute 生成绝对定位的元素。
(2)绝对定位的元素使用 left、right、top、bottom 属性相对于其最接近的一个具有定位属性的父元素进行绝对定位。
(3)如果不存在这样的父元素,则相对于 body 元素,即相对于浏览器窗口。

2,样例代码
下面代码让标题元素相对于它的父容器做绝对定位(注意父容器 position 要设置为 relative)。
同时通过 top 属性让标题元素上移,使其覆盖在父容器的上边框。
最后通过 left 和 margin-left 配合实现这个绝对定位元素的水平居中。

  1. <style>
  2.   #box {
  3.     width: 200px;
  4.     height: 100px;
  5.     -webkit-box-flex:1;
  6.     border: 1px solid #28AE65;
  7.     border-radius:6px;
  8.     padding: 20px;
  9.     position: relative;
  10.     font-size: 12px;
  11.   }

  12.   #title {
  13.     background: #FFFFFF;
  14.     color: #28AE65;
  15.     font-size: 15px;
  16.     text-align: center;
  17.     width: 70px;
  18.     height: 20px;
  19.     line-height: 20px;
  20.     position: absolute;
  21.     top: -10px;
  22.     left: 50%;
  23.     margin-left: -35px;
  24.   }
  25. </style>

  26. <div id="box">
  27.   <div id="title">标题</div>
  28.   欢迎访问 hangge.com 欢迎访问 hangge.com 欢迎访问 hangge.com 欢迎访问 hangge.com
  29. </div>
复制代码


五、position: fixed(固定定位)
1,基本介绍
(1)fixed 生成绝对定位的元素,该元素相对于浏览器窗口进行定位。
(2)固定定位的元素不会随浏览器窗口的滚动条滚动而变化,也不会受文档流动影响,而是始终位于浏览器窗口内视图的某个位置。

2,样例代码
(1)下面代码让输入框位于浏览器窗口的底部。

  1. <style>
  2.   input {
  3.     position: fixed;
  4.     bottom: 10px;
  5.   }
  6. </style>

  7. <ol>
  8.   <li>数据</li><li>数据</li><li>数据</li><li>数据</li><li>数据</li><li>数据</li>
  9.   <li>数据</li><li>数据</li><li>数据</li><li>数据</li><li>数据</li><li>数据</li>
  10.   <li>数据</li><li>数据</li><li>数据</li><li>数据</li><li>数据</li><li>数据</li>
  11.   <li>数据</li><li>数据</li><li>数据</li><li>数据</li><li>数据</li><li>数据</li>
  12. </ol>
  13. <input type="text" />
复制代码


上一篇:lang=”zh-cn”、lang=“zh”、lang=“zh-cmn-Hans”用法解释
下一篇:css鼠标放大镜移入效果不用图片代码
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|巅峰霸主 ( 京ICP备12023415号-2 )

声明:本站的任何信息和内容仅代表作者的立场和观点,与巅峰霸主网无关。

禁止在巅峰霸主网发布任何与《中华人民共和国法律》相抵触的言论!

GMT+8, 2020-2-25 18:28 , Processed in 0.083625 second(s), 25 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表