前端CSS的定位属性

前端CSS的定位属性

开发工具与关键技术： DW ，CSS的position




讲到CSS让我想到了，其它三大属性。它们分别是：

1.   position： 属性控制页面上元素间的位置关系。

2.    

3.   display 属性控制页面元素是否显示或者是堆叠还是并排显示。

 

4.   float  属性提供控制方法。通过float这种控制方法，可以实现多栏布局，导航菜单等等。

 

但我总结的是position属性：

1.
position属性控制页面上元素间的位置关系，也就是排版。

2.
怎么用？要知道怎么用就要先了解position的属性值。

3.position它有一个默认值“static“：页面元素默认的定位。

这是一开始两个div的样式
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210429092407364.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYxOTQ1MA==,size_16,color_FFFFFF,t_70#pic_center)


相对定位

（1）position：relative；它是相对定位，可以用 top，right，bottom，left这四个属性改变它的位置，多数都是用top和left去改变它的位置，它还可以配合其它属性使用分别是“绝对定位”和“固定定位”。

![在这里插入图片描述](https://img-blog.csdnimg.cn/20210429091935606.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYxOTQ1MA==,size_16,color_FFFFFF,t_70#pic_center)



















注意：

1.在使用相对定位的时候要注意，没有进行移动，元素依旧在原来的位置。

2.设置相对定位之后，移动了，但元素依旧在原来的位置。

 

绝对定位

（2）position：absolute；它是绝对定位，可以用 top，right，bottom，left这四个属性改变它的位置，可以用relative和absolute配合使用就能改变我们的定位点，不用相对定位也它可以改变定位点，就是找到设置绝对定位的父元素，相对于父元素定位。


 
     
 
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210429092249752.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYxOTQ1MA==,size_16,color_FFFFFF,t_70#pic_center)


注意：

1.     设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。

因为绝对定位的元素与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置
z-index 属性来控制这些元素的堆放次序。

固定定位

（3）position：fixed；它是固定定位，可以用top ,right, bottom ,left.属性来改变它的位置，也可以用relative和fixed配合使用就能改变我们的定位点，多数情况下用top和left。


 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210429092427660.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYxOTQ1MA==,size_16,color_FFFFFF,t_70#pic_center)

                       
 


注意：

设置这个之后，它定在页面上无论怎么去上下滚动鼠标滚轮，它就是在它移动后的位置。

希望可以帮助到你们，以上就是我的分享，新手上道，请多多指教。如果有更好的方法或不懂得地方欢迎在评论区教导和提问喔！