首页 > 其他分享 >CSS position属性

CSS position属性

时间:2024-07-27 15:58:21浏览次数:16  
标签:定位 元素 流中 relative position fixed CSS 属性

position属性指定一个元素的定位方法的类型。

一、static:默认

也就是没有定位。

二、relative:相对定位

1)相对定位是相对于自己原来在文档流中的位置来定位,不指定 top、left 等定位值时,不改变元素位置。
2)相对定位元素仍会占据原有文档流中的位置。

三、absolute:绝对定位

1)绝对定位是相对于第一个非 static 的祖先元素(使用relative、absolute、fixed 定位的祖先元素)进行定位,都没有定位,则相对于浏览器左上角定位。
2)绝对定位不占据原有文档流中的位置。

四、fixed:固定定位

固定定位是一种特殊的绝对定位,与普通绝对定位的区别是无论父元素是否定位,子元素采用固定定位,都将相对于浏览器左上角定位,且固定在指定位置,不随浏览器滚动条的滚动而滚动。

五、sticky:粘性定位

1)粘性定位的元素是通过用户的滚动,在 position:relative 与 position:fixed 定位之间切换。
2)起初它表现的像 position:relative; 而当页面滚动超出目标区域时,它的表现就像 position:fixed;,会固定在目标位置。

标签:定位,元素,流中,relative,position,fixed,CSS,属性
From: https://blog.csdn.net/2401_86312870/article/details/140719900

相关文章

  • 03HTML+CSS
    跟着视频完成第二天的综合案例,分别为新闻界面和注册案例新闻界面代码1<!DOCTYPEhtml>2<htmllang="en">3<head>4<metacharset="UTF-8">5<metaname="viewport"content="width=device-width,initial-scale=1.0&qu......
  • C# 获取修改了哪些属性
    publicclassProgram{staticpublicDictionary<string,Tuple<object,object>>GetChangedProperties<T>(Ta,Tb)whereT:class{if(a!=null&&b!=null){if(Object.Equals(a,b)){retu......
  • selenium----CSS表达式选择元素
    前面我们学习了根据id、class属性、tag名选择元素。如果我们要选择的元素没有id、class属性,或者有些我们不想选择的元素也有相同的id、class属性值,怎么办呢?这时候我们通常可以通过 CSSselector 语法选择元素。选择元素通过CSSSelector选择单个元素的方法是fin......
  • html+css 实现水波纹按钮
    前言:哈喽,大家好,今天给大家分享html+css绚丽效果!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦......
  • 【HTML+CSS】HTML锚点:创建页面内导航的简易指南
    目录一、什么是HTML锚点?二、如何创建HTML锚点?1.定义锚点目标2.创建指向锚点的链接三、进阶使用1.平滑滚动2.动态锚点四、锚点工具总结五、锚点的应用场景1. 长页面导航2. 表单导航3. 图像画廊4. FAQ页面六、锚点的SEO考虑七、锚点的兼容性八、实践建议......
  • 【HTML+CSS】CSS字体美化:打造引人入胜的视觉盛宴
    目录一、选择合适的字体1.1Web安全字体1.2自定义字体二、字体样式调整2.1字体大小与行高2.2字体粗细与斜体2.3字体颜色三、文本装饰与布局3.1文本阴影3.2文本换行与对齐3.3文本装饰线四、字体美化实战案例 在网页设计中,字体不仅仅是文字信息的载体,更是......
  • 【HTML+CSS】使用HTML与后端技术连接数据库
    目录一、概述1.1HTML前端1.2后端技术1.3数据库二、HTML表单示例三、PHP后端示例3.1连接数据库3.2接收数据并插入数据库四、安全性4.1防止SQL注入4.2数据验证与清洗五、优化5.1索引优化5.2查询优化六、现代Web开发中的最佳实践6.1使用ORM(对象关系映射......
  • 【HTML+CSS】CSS中的对齐艺术
    目录1.水平居中文本水平居中行内元素或行内块元素水平居中块级元素水平居中2.垂直居中单行文本垂直居中弹性盒布局(Flexbox)绝对定位与负边距3.同时水平垂直居中弹性盒布局(Flexbox)绝对定位与transform4.左对齐2.右对齐        在网页设计中,元素的居......
  • 02HTML+CSS
    今天下午学习了列表,表格和表单。列表:列表分为无序列表,有序列表,定义列表。无序列表没有加样式,界面显示出来前面都是一个点,有序列表显示是带有数字1,2,3的列表,而定义列表,可以给出列表的标题和内容。一般来说,我们用到无序列表多,也是重点。无序列表格式:父标签<ul><li></li></ul>,里面......
  • 鸿蒙next开发学习:@AnimatableExtend装饰器-自定义可动画属性
    @AnimatableExtend装饰器用于自定义可动画的属性方法,在这个属性方法中修改组件不可动画的属性。在动画执行过程时,通过逐帧回调函数修改不可动画属性值,让不可动画属性也能实现动画效果。也可通过逐帧回调函数每帧修改可动画属性的值,实现逐帧布局的效果。可动画属性:如果一个属......