CSS-定位属性position(static,relative,fixed,absolute)的使用详解

时间：2023-04-05 01:09:54 HTML5

position属性介绍(1)position属性从CSS2开始就有了，这个属性规定了元素的定位类型。所有主流浏览器都支持position属性。(2)position有四种可选值：static、relative、absolute、fixed。下面分别介绍一下。（其实还有一个inherit，不过这个是IE特有的，这里就不讨论了）position:static(defaultvalue)1、基本介绍（一）static是默认的。表示没有定位，或者没有定位属性。(2)如果元素的position属性值为static（或未设置position属性），则元素以正常流的形式出现（忽略top、bottom、left、right或z-index声明）。2.使用示例css:html:

我们没有设置元素的position属性值，所以默认显示效果如下：

position:relative（相对定位）一、基本介绍（一）相对生成相对定位的元素，这些元素相对于它们的正常位置进行定位。(2)相对定位的过程如下：首先以默认方式（静态）生成一个元素（并且元素像层一样浮动）。然后相对于上一个位置移动，移动的方向和幅度由left、right、top、bottom属性决定，偏移前的位置不变。2.示例代码下面的代码将文本输入框的位置设置为relative（相对定位），相对于默认位置分别向右和向上移动15个像素。css:div{宽度:200px;高度：100px；背景色：#C9FFFF；}输入{位置：相对；左：15px；顶部：-15px；}html:

运行效果如下：详细见本人博客：https://artdong.github.io/blo...1、基础简介(1)absolute生成绝对定位的元素。(2)绝对定位元素使用left、right、top、bottom属性相对于其最近的带定位属性的父元素进行绝对定位。(3)相对于body元素，即相对于浏览器窗口，如果不存在这样的父元素。2.示例代码下面的代码可以让title元素相对于它的父容器绝对定位（注??意父容器的位置要设置为relative）。同时，title元素通过top属性向上移动，使其覆盖父容器的顶部边框。最后通过left和margin-left的配合实现这个绝对定位元素的水平居中。css:#box{宽度:200px;高度：100px；-webkit-box-flex:1;边框：1px实心#28AE65；边框半径：6px；填充：20px；位置：相对；字体大小：12px；#title{背景：#FFFFFF;颜色：#28AE65；字体大小：15px；文本对齐：居中；宽度：70px；高度：20px；行高：20px；位置：绝对；50%；左边距：-35px；}html:Title

Welcometomyblog

效果如下，虽然title元素在border容器里面。但是因为它使用的是绝对定位，并且调整了自己的位置，所以最终的显示效果是覆盖父容器的边框。具体可以看我的博客：https://artdong.github.io/blo...1、基本介绍(1)fixed生成一个绝对定位的元素，相对于浏览器窗口定位。(2)固定定位的元素不会随着浏览器窗口的滚动条而变化，也不会受到文档流向的影响，而是始终位于浏览器窗口视图中的某个位置。2.示例代码(1)下面的代码使输入框位于浏览器窗口的底部。css:输入{位置:固定;底部：10px；}html:

数据
数据
数据
数据
数据
数据
数据
数据
数据
数据
数据
数据
数据
数据
数据
数据
数据
数据
数据
数据
数据
数据
数据
数据
>Data
Data
Data

(2)不管怎么滚动条都可以看到滚动时，输入框总是在窗口的底部。详情见我的博客：https://artdong.github.io/blo...更多angular1/2/4/5、ionic1/2/3/4、react、vue、微信小程序、nodejs等技术文章.、视频教程、开源项目，请扫描下方二维码关注微信公众号——全栈潮人。