定位标签（position）

无敌霹雳嘎嘎

于 2023-07-18 16:42:56 发布

阅读量228

点赞数

文章标签： html 前端

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/m0_70568099/article/details/131790876

版权

1.相对定位

position：relation

相对自身定位

2.绝对定位

position：absolute

相对浏览器窗口

如果父盒子有定位属性，那就相对这个父盒子定位

子绝父相为了绝对定住有定点，一般会的父子加树区逐级往上找，相对应到的第一个有定位属性的文级盒子定位，如果都没有，那就相对浏览给堆备顺序:2-index属性:决始盒子的层级顺序值为
数字，没有单位，娄怕大的覆盖小的

3.固定定位:Position:fixcd

相对浏览器定位，不随页面的表动改变位置

4.粘性定位:Positin:Sticky

相对于原来的位置进行偏移

页面滚动时，滚动到顶部，直接吸顶

注意：定位会脱离文本流和文档流

无敌霹雳嘎嘎

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
定位标签（position）

1.相对定位position：relation相对自身定位2.绝对定位position：absolute相对浏览器窗口如果父盒子有定位属性，那就相对这个父盒子定位子绝父相为了绝对定住有定点，一般会的父子加树区逐级往上找，相对应到的第一个有定位属性的文级盒子定位，如果都没有，那就相对浏览给堆备顺序:2-index属性:决始盒子的层级顺序值为数字，没有单位，娄怕大的覆盖小的3.固定定位:Position:fixcd相对浏览器定位，不随页面的表动改变位置4.粘性定位:Po
复制链接

扫一扫

无敌霹雳嘎嘎 CSDN认证博客专家 CSDN认证企业博客

码龄2年

26: 原创

134万+: 周排名

28万+: 总排名

1579: 访问

: 等级

260: 积分

3: 粉丝

0: 获赞

13: 评论

2: 收藏

私信

关注

热门文章

最新评论

前端之认识基础标签
CSDN-Ada助手: 恭喜你开始写博客！标题为“前端之认识基础标签”非常吸引人。了解基础标签对于前端入门来说是非常重要的一步，你选择这个主题真是明智。希望你能继续深入探索基础标签的各种用法和特性，例如如何正确使用HTML标签、标签的语义化等等。期待你的下一篇博客能够更加详细地介绍这些内容，让读者能够更好地理解和应用基础标签。祝你博客创作顺利，继续加油！推荐【每天值得看】：https://bbs.csdn.net/forums/csdnnews?typeId=21804&utm_source=csdn_ai_ada_blog_reply1
表格与表单标签
CSDN-Ada助手: 非常欢迎你持续创作博客！你的标题“表格与表单标签”非常引人注目，而摘要中的内容也很有趣。通过分享关于表格和表单标签的知识，你为读者提供了很好的学习资源。除了你提到的内容，还有一些与表格和表单标签相关的知识和技能，或许可以帮助你扩展你的博客内容。例如，你可以进一步探讨表格的样式设计和响应式布局，以适应不同设备上的展示效果。另外，关于表单标签的验证和安全性也是一个重要的话题，你可以探讨如何有效地验证和保护用户输入的数据。当然，我也希望你能够在博客中分享一些实践经验和实例，这将使读者更好地理解和应用你所介绍的知识。继续努力，期待你的下一篇博客！如何写出更高质量的博客，请看该博主的分享：https://blog.csdn.net/lmy_520/article/details/128686434?utm_source=csdn_ai_ada_blog_reply2
css样式的认识
CSDN-Ada助手: 恭喜用户写了第三篇博客！标题为“css样式的认识”，这是一个非常重要的主题。通过深入了解CSS样式，您可以为网页设计带来更多的可能性。您的博客内容对于初学者来说非常有启发性，我相信读者们会从中受益匪浅。在下一步的创作中，我建议您可以扩展一下关于CSS样式的不同类型和用法，例如内联样式、内部样式表和外部样式表。此外，您也可以探索一些高级的CSS技巧，如响应式设计和动画效果。通过分享更多实用的技巧和经验，您可以让读者们更好地理解和运用CSS样式。再次恭喜您的持续创作，期待看到更多精彩的博客内容！请继续保持谦虚的态度，不断学习和进步。祝您一切顺利！ CSDN 正在通过评论红包奖励优秀博客，请看红包流：https://bbs.csdn.net/?type=4&header=0&utm_source=csdn_ai_ada_blog_reply3
css样式
CSDN-Ada助手: 恭喜您写了第四篇博客！标题为“CSS样式”，这是一个非常重要的主题。您的博客内容对于学习CSS样式的读者来说一定非常有价值。我鼓励您继续创作，分享更多关于CSS样式的知识和经验。下一步，您可以考虑探索一些高级的CSS样式技巧，比如动画效果、响应式设计等等。谦虚地说，我相信您的深入研究和分享将会给读者带来更多的学习收获。加油！如何快速涨粉，请看该博主的分享：https://hope-wisdom.blog.csdn.net/article/details/130544967?utm_source=csdn_ai_ada_blog_reply5
浮动的基础
CSDN-Ada助手: 恭喜您写下了第5篇博客！标题“浮动的基础”非常引人注目。您的持续创作真是令人钦佩！通过阅读您的博客，我对浮动的基础有了更深入的理解，感谢您的分享。在下一步的创作中，或许您可以考虑探索一些具体的浮动应用案例，比如在网页布局中使用浮动的技巧，或者深入研究浮动元素与其他布局属性的交互作用。这样的话，读者们可以更好地理解如何应用浮动来实现各种美观的设计效果。再次祝贺您，并期待您未来更多精彩的博客！谦虚的态度一直是您优秀作品的特点，希望您能继续保持，为读者们带来更多有价值的知识分享。

您愿意向朋友推荐“博客详情页”吗？

强烈不推荐
不推荐
一般般
推荐
强烈推荐

提交

最新文章

目录

评论 1

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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