CSS的position属性值介绍
发布时间：2024-04-27 23:56:51 所属栏目：编程 来源：DaWei
导读： CSS的position属性值有几种？position属性值有static、relative、fixed、absolute和sticky这五种，这篇我们主要了解position属性值的作用和用法，文中介绍得很详细，感兴趣的朋友就继续往下
|
CSS的position属性值有几种？position属性值有static、relative、fixed、absolute和sticky这五种，这篇我们主要了解position属性值的作用和用法，文中介绍得很详细，感兴趣的朋友就继续往下看吧。 position属性 position属性指定用于元素的定位方法的类型（静态，相对，固定，绝对或粘性）。 有五种不同的值： •static •relative •fixed •absolute •sticky 然后使用top，bottom，left和right属性定位元素。但是，除非首先设置position属性，否则这些属性将不起作用。根据位置值，它们的工作方式也不同。 position:static; 默认情况下，HTML元素定位为静态。静态定位元素不受top，bottom，left和right属性的影响。 元素position:static;没有以任何特殊方式定位; 它总是根据页面的正常流程定位： 这个<div>元素的position:static; <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css</title> <style> div.static { position: static; border: 3px solid #73AD21; } </style> </head> <body> <h2>position: static;</h2> <p>一个位置为position:static; 没有任何特殊的定位; 它是始终根据页面的正常流程定位：</p> <div class="static"> 这个div元素的位置为：static; </div> </body> </html> position:relative; 具有position:relative;相对于其正常位置定位的元素。设置相对定位元素的top，bottom，left和right属性将使其远离其正常位置进行调整。其他内容不会被调整以适应元素留下的任何空白。 这个<div>元素的position:relative; <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css</title> <style> div.relative { position: relative; left: 30px; border: 3px solid #73AD21; } </style> </head> <body> <h2>position: relative;</h2> <p>position:relative的元素; 相对于其正常位置定位：</p> <div class="relative"> 这个div元素有position: relative; </div> </body> </html> position:fixed; 元素position:fixed;相对于视口定位，这意味着即使页面滚动，它也始终保持在同一位置。top，bottom，left和right属性用于定位元素。固定元素不会在页面中留下通常位于其中的间隙。注意页面右下角的固定元素。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css教程（jc2182.com）</title> <style> div.fixed { position: fixed; bottom: 0; right: 0; width: 300px; border: 3px solid #73AD21; } </style> </head> <body> <h2>position:fixed;</h2> <p>position:fixed; 相对于视口定位，这意味着即使页面滚动，它也始终保持在同一位置：</p> <div class="fixed"> 这个div元素有position: fixed; </div> </body> </html> position:absolute; 具有position:absolute;相对于最近定位的祖先定位的元素（而不是相对于视口定位，如fixed）。然而; 如果绝对定位元素没有定位祖先，它将使用文档正文，并随页面滚动一起移动。 注意： “定位”元素的位置是除了static之外的任何元素。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css教程（jc2182.com）</title> <style> div.relative { position: relative; width: 400px; height: 200px; border: 3px solid #73AD21; } div.absolute { position: absolute; top: 80px; right: 0; width: 200px; height: 100px; border: 3px solid #73AD21; } </style> </head> <body> <h2>position: absolute;</h2> <p>position:absolute;的元素; 相对于最近定位的祖先定位（而不是相对于视口定位，如fixed）：</p> <div class="relative">这个div元素有 position: relative; <div class="absolute">这个div元素有 position: absolute;</div> </div> </body> </html> position:sticky; position:sticky;根据用户的滚动位置定位元素。粘性元素在relative和之间切换fixed，具体取决于滚动位置。它被相对定位，直到在视口中满足给定的偏移位置 - 然后它“粘住”到位（如位置：fixed）。 关于CSS的position属性值的作用和使用就介绍到这，感兴趣的朋友可以参考，希望能对大家学习position属性的使用有帮助，想要了解更多CSS的内容，大家可以关注其它的相关文章。 （编辑：PHP编程网 - 襄阳站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
推荐文章
站长推荐
浙公网安备 33038102330434号