CSS学习之-02

position:该属性指定了元素的定位类型

static:默认值,即没有定位,准寻正常的文档流对象,该定位不会受到top、bottom、left、right影响。

fixed:元素的位置相对于浏览器窗口是固定的,即使窗口滚动它也不会移动。Fixed定位使元素的位置与文档流无关,因此不占据空间。Fixed定位的元素和其他元素重叠。

(该定位在IE7、IE8下需要描述!DOCTYPE才能支持)

relative:相对定位元素的定位是相对其正常位置,通过使用top、left、right、bottom来改变元素位置。移动元素后,它原本在文档流内部的位置不会被其他替代。也就是说,这个元素移动后,它所占用的空间不会消失。

absolute:绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于<html>。该定位使元素的位置与文档流无关,因此不占据空间。

sticky:粘性定位,基于用户的滚动位置来定位。当页面正常显示时,等于relative,当页面滚动超出目标区域时,它的表现就像fixed,会固定在目标位置。

元素定位表现为在跨越特定阈值前为相对定位,之后为固定定位。这个阈值指的是top、right、bottom、left其中的一个,才可以使得粘性定位生效。否则其行为与相对定位相同。

(注意:Internet Explorer,Edge15及更早版本的IE不支持Sticky定位,Safari需要使用-webkit-prefix(prefix等于需要使用的定位名称)

相关推荐
Stringzhua4 分钟前
Vue中的数据渲染【4】
css·vue.js·css3
阿珊和她的猫4 小时前
v-scale-scree: 根据屏幕尺寸缩放内容
开发语言·前端·javascript
_Kayo_6 小时前
node.js 学习笔记3 HTTP
笔记·学习
加班是不可能的,除非双倍日工资8 小时前
css预编译器实现星空背景图
前端·css·vue3
wyiyiyi9 小时前
【Web后端】Django、flask及其场景——以构建系统原型为例
前端·数据库·后端·python·django·flask
CCCC13101639 小时前
嵌入式学习(day 28)线程
jvm·学习
gnip9 小时前
vite和webpack打包结构控制
前端·javascript
excel10 小时前
在二维 Canvas 中模拟三角形绕 X、Y 轴旋转
前端
星星火柴93610 小时前
关于“双指针法“的总结
数据结构·c++·笔记·学习·算法
小狗爱吃黄桃罐头10 小时前
正点原子【第四期】Linux之驱动开发篇学习笔记-1.1 Linux驱动开发与裸机开发的区别
linux·驱动开发·学习