CSS position属性

最新推荐文章于 2022-10-31 22:56:32 发布
最新推荐文章于 2022-10-31 22:56:32 发布
阅读量132 收藏
点赞数
分类专栏： HTML/CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zuo_zuo_blog/article/details/88044957
版权

1.absolute:生成绝对定位的元素，相当于static定位以外的第一个父元素进行定位，元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
2.fixed :生成固定定位的元素，相当于浏览器窗口进行定位
3.relative:生成相对定位的元素，相对于其正常位置进行定位
4.static：默认值，没有定位
5.sticky:粘性定位，该定位基于用户滚动的位置
6.inherit:规定应该从父元素继承positon属性的值
7.initial:设置该属性为默认值

zuo_zuo_blog
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
微信小程序开发position等于static、relative、absolute、fixed、stricky时元素显示详细介绍
tl437002770的博客
01-25 829
微信小程序开发position等于static、relative、absolute、fixed、stricky时元素显示详细介绍
CSS position属性的正确解释和实例应用
09-25
目前几乎所有主流的浏览器都支持position属性（"inherit"除外，"inherit"不支持所有包括IE8和之前版本IE浏览器，IE9、IE10还没测试过），以下是w3school对position五个值的解释,有需要的朋友可以参考下
position:sticky实现吸顶效果以及兼容性
qazxbjp2010的博客
03-26 5724
在开发时遇到一个吸顶效果的需求，先看一下最终实现的效果： 收到这个需求的时候，其实也知道position:stricky这个属性，现在重新介绍一下： 这是一个结合了 position:relative 和 position:fixed 两种定位功能于一体的特殊定位，适用于一些特殊场景。 如果 position:sticky 元素的任意父节点定位设置为 overflow:hidden，则父...
CSS精要点笔记
weixin_49526860的博客
10-31 155
CSS 精要点笔记
css定位
weixin_48864616的博客
10-13 97
定位 定位有很多种方式 static默认值（不定位） relative 相对定位 absolute 绝对定位 fixed 固定定位 sticky 粘性定位 relative相对定位 top right bottom left 当我们给一个元素添加了相对定位属性，该元素默认情况下不会有任何的变化。我们可以通过上下左右四个值调整元素的位置。 虽然我们会看到元素位置改变，但是，对于布局来讲，元素位置就像没有改变一样 .box { position: relative; top: 100px;
CSS(9) 定位
flower521528的博客
03-10 194
一·、用position定位 position:static 默认值，无效果 position:relative 相对，相对于自己的位置进行定位 position:absolute 绝对定位，脱离文档流，相对于浏览器进行定位 position:fixed 固定定位 position:stricky 粘性定位 posit:z-index 元素的堆叠顺序，对定位起作用 1.相对定位； 一个div，最初在页面的左上角，用position进行定位，用
CSS position属性和实例应用演示
09-24
主要介绍了CSS position属性和实例应用演示,absolute（绝对定位）,relative（相对定位）,relative与absolute的结合使用以及fixed(固定定位),需要的朋友可以参考下
CSS position属性absolute relative等五个值的解释
09-25
目前几乎所有主流的浏览器都支持position属性（"inherit"除外，"inherit"不支持所有包括IE8和之前版本IE浏览器，IE9、IE10还没测试过），以下是w3school对position五个值的解释,需要的朋友可以参考下
简明CSS定位属性position
09-25
POSITION属性用来决定元素在页面上的位置，其定位属性有多个，下面一一为大家介绍下，希望大家在使用过程中可以用到
position: sticky 详解
seimeii的博客
09-30 437
position: sticky 详解
position:sticky特性（坑）总结
huang100qi的专栏
02-11 1069
1.sticky不会触发BFC， 2.z-index无效， 3.当父元素的height：100%时，页面滑动到一定高度之后sticky属性会失效。 4.父元素不能有overflow:hidden或者overflow:auto属性。 5.父元素高度不能低于sticky高度，必须指定top、bottom、left、right4个值之一 ...
css粘性定位position：sticky问题采坑
热门推荐
小熊的博客
07-14 14万+
前言：position:sticky是css定位新增属性；可以说是相对定位relative和固定定位fixed的结合；它主要用在对scroll事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置。使用：#sticky-nav { position...
position: sticky 详解（防坑指南）
包磊磊的博客
05-14 4万+
写这篇文章的原因是无论中文还是英文关于 sticky 的文章，只是说了 sticky 这个性感的 css 新特性可以拿来用，简单写一个 demo 完事，并没有详细的解析它。我希望这篇文章能帮助大家在使用 sticky 的时候更顺手。 属性效果 sticky 的本意是粘糊糊的，但在 css 中的表现更像是吸附。常见的吸顶、吸底（移动端网站的头部返回栏，底部切换栏之类）的效果用这个属性非常适合。例如下图中的导航，也可以点链接看实际效果。 导航的效果更像是在页面打开的时候是 relative 的，向下滑动的
CSS3新增的position属性值sticky介绍
九天翔龙的技术博客
10-17 1497
CSS3不久前新增了position的属性值，sticky。 设置了sticky的元素，在屏幕范围（viewport）时该元素的位置并不受到定位影响，该在哪里就是哪里（设置是top、left等属性无效）。但是，当该元素的位置将要移出屏幕范围时，定位又会变成fixed，根据设置的left、top等属性成固定位置的效果。 　　可以知道sticky属性有以下几个特点： 1、该元素并不脱离文档流，仍...
关于CSS的position四种取值
yuxuan89814的专栏
08-19 3917
关于position的四种取值，自己只是混淆，希望这次总结能加深印象： position
CSS中容易被忽视的 position属性sticky
USTC-sparks
05-30 1万+
position: sticky; 基于用户的滚动位置来定位。粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。这个特定阈值...
position的属性
zuo_zuo_blog的博客
04-06 1万+
1.position: relative;相对定位 不影响元素本身特性，不会使元素脱离文档流，没有定位偏移量时对元素无影响（相对于自身原本位置进行偏移）， 提升层级（用z-index样式的值可以改变一个定位元素的层级关系，从而改变元素的覆盖关系，值越大越在上面，z-index只能在position属性值为relative或absolute或fixed的元素上有效。） （两个都为定位元素，后面的会覆盖前面的定位） 2.position: absolute 绝对定位 使元素完全脱离文档流（在...
select框默认样式去除（隐藏的小图标显示）
zuo_zuo_blog的博客
11-20 6648
CSS代码 /*清除ie的默认选择框样式清除，隐藏下拉箭头*/           select::-ms-expand { display: none; }                    .info-select{             width: 12%;             margin-left: 64%;             border: none;       ...
overflow的属性添加的滚动条在移动端不起作用解决方案
zuo_zuo_blog的博客
12-23 2949
滚动条组成 ::-webkit-scrollbar 滚动条整体部分 ::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条） ::-webkit-scrollbar-track 滚动条的轨道（里面装有Thumb） ::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。 ::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去） ::
css position属性
最新发布
04-02
CSS position属性用于设置定位元素的定位方式，将元素从文档流中取出并相对于其父元素或文档进行定位。 position属性的值有以下几种： 1. static：元素的位置由文档流决定，不会被定位。 2. relative：元素相对于...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值