css位置属性简介

今天药忘吃喽~ 2021-11-02 04:52 501阅读 0赞

css位置属性

css位置属性的语法是：position：xxx  
定位可以分为1.position：static（静态位置属性）2.position：relative（相对定位）3.position：abosult（绝对定位）4.position：fixed（固定定位）。以上就是position属性的四个值，下面我们来具体的介绍一下这四个值的特点：  
**一·position：static（静态位置属性）**  
元素框正常生成，块元素会生成一个矩形的框，作为文档流的一部分，行内元素则会闯将一个或多个行框，置于他的父元素中；（不会脱离文档流）；

**二·posititon:relative(相对定位)**  
【相对定位】是一个比较好理解的概念，  
它是相对于自身的起始位置进行定位，然后可以设置垂直或者是水平位置，让元素【相对于】 它的起点进行移动；且自身脱离文档流，定位后原来的位置不会被其他的元素所占据。比较适用于元素的微调。（因为元素使用相对定位进行移动，元素任然会占据原来的空间，所以，移动元素会导致覆盖其他的元素）

**三·position:abosult(绝对定位)**  
【绝对定位】与相对定位不同，绝对定位是相对于【祖籍元素】中含有【position】属性，并且 值不为【static】的元素，进行的定位；  
如果所有的祖籍元素都没有该属性的话，那么就相对于【body】进行绝对定位；  
它与【相对定位】相同的是它同样是定位后也会脱离文档流，但是元素本身位置会被其他元素所占据。（从文档流中删除，它能看到父元素，但是父元素却看不到它），元素大小为默认的百分之百为内容大小，默认是无外边距的；

**四·position:fixed(固定定位）**  
【固定定位】是相对于【视图窗口】进行的定位，它是浮动在页面中的，元素位置不会随着窗口滚动条的滚动而发生变化，除非你在屏幕中移动浏览器窗口的屏幕位置或者改变浏览器窗口的显示大小。而且使用固定定位的元素，元素本身不会脱离文档流，但是它本身的位置会被其他元素所占据；元素本身的宽度由默认的百分之百，变为内容大小（尽可能小）；  
\-top:目标元素距离视图窗口顶部 如果小于0，往上走；  
\-bottom：目标元素距离视图窗口底部 如果小于0；王下走；  
\-left：目标元素距离视图窗口左边 如果小于0，往左走；  
\-right：目标元素距离视图窗口右边 如果小于0，往右走；

以上就是 【position】属性的四个属性值的含义；