CSS position定位属性，及五大属性值

position属性

CSS中的position属性，可以指定HTML元素进行位置上的定位的定位方式，注意是定位方式，要具体进行定位，还需要搭配使用top、bottom、left、right等属性进行具体的定位。比如当前页面的导航栏被固定在窗口的顶端，不会随页面的滚动而滚动。

---

position五大可选属性值

属性值	描述
static	静态定位，HTML元素的默认定位方式，不受top、bottom、left 和 right 属性的影响
relative	根据正常位置进行定位，搭配top、bottom、left 和 right等属性使用
fixed	元素相对视口定位，不会随页面滚动而滚动
absolute	元素相对最近的定位祖先元素进行定位，如果没有绝对定位的祖先，则会相对于文档主体body元素
sticky	根据滚动的位置进行定位

position:static实例代码，及在线编辑器

position属性的static属性值设置的HTML元素的样式不会受到top、right、bottom、left等属性的影响：

<p id='p1'>static</p>

<style>
  #p1{border:1px solid skyblue; position:static; right:5px;}
</style>

试一试

position:relative实例代码

下方实例中p元素相对于正常位置的左侧的距离为20px：

<div class='d1'>
  <p id='p2'>relative</p>
  <p>nomal</p>
</div>

<style>
  #p2{position:relative; left:20px;}
  .d1{border:1px solid orange;width:100%;height:100%;}
</style>

试一试

position:fixed实例代码

下方这个实例中的fixed相对的是编辑器的视口：

<p id='p3'>fixed</p>

<style>
  #p3{background-color:blue;position:fixed; right:0px;}
</style>

试一试

position:absolute实例代码

<p id='p4'>absolute</p>

<style>
  #p4{background-color:green;position:absolute; bottom:0px;}
</style>

试一试

position:sticky实例代码

<p>近年来，随着人工智能的发展和高新科技的进步，python的火热程度有目共睹，其简洁的语法和丰富的第三方库，以及人工智能的巨大潜力和巨大的市场，让其未来充满了想象空间。</p>
<p id='p5'>sticky，滚动编辑器右侧的滚动条试一试</p>
<p>0基础学习python难不难这个并不好说，只有自己尝试了才知道，而且个人认为，这个尝试的成本和自学的时间成本并不会很高，比如，用学鸡汤的时间或少玩游戏节省下来的一些时间来学python会是个不错的选择，更何况人应当不断学习，方能长足进步。鄙人——笨鸟工具网站的站长，就是0基础自学的计算机编程。在从事网站、机器学习相关的程序和算法开发之前，做了将近五六年的文案相关的工作，最高的职位混到企划主管。</p><br><br><br><br><br><br><br><br><br><br>
<p>该教程，或文档有什么特色该python的全栈教程会着重根据鄙人这样一个0基础自学计算机编程的学习经验、心得，和网站、机器学习模型开发的实战经验来撰写，并会提供相关的实例作为参考。python全栈教程的目标是什么该python教程致力于能够简单易懂，接地气，并且希望自己有能力让使用该教程的人能够通过python开发出自己的网站应用、或机器学习的应用。希望该教程或文档会对大家有所帮助！</p>
<p></p>

<style>
  #p5{background-color:skyblue;position:sticky; top:0px;}
</style>

试一试