css:position定位属性详解
发布网友
发布时间：2024-10-09 02:10
共1个回答
热心网友
时间：2024-10-29 02:36
在讲解定位之前，先来了解一下文档流的概念。w3c的解释是：正常流中的框属于格式化上下文，它可以是块的或内联的，但不能同时出现。块级框参与块格式化上下文，而内联级别的框参与内联格式上下文。
简单来说，每个块元素会自上而下分成一行，并在每行中按从左至右的顺序排放元素；非浮动块级元素独占一行，浮动元素则按照规定浮在行的一端，若当前行容不下，则另起新行再浮动；内联元素也不会独占一行，几乎所有元素（包括块级、内联和列表元素）均可生成子行，用于摆放子元素。有三种情况将使得元素脱离文档流而存在，分别是float、absolute、fixed。
position属性有4个可选值，分别是static、relative、absolute、fixed。还有第5个属性sticky，由于部分浏览器可能还不支持，所以先不介绍。
一、static：默认值，指定元素使用正常的布局行为，遵循正常的文档流对象。此时top、right、bottom、left属性无效。
二、relative：相对定位元素的定位是相对其正常位置。即相对于原来的位置进行定位。
如果只给蓝色块添加relative相对定位，不添加top、right、bottom、left等属性时，它会处在正常文档流中。如果添加了这些属性，蓝色块就会相对于其原位置进行移动。
三、absolute：绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于html。
absolute定位使元素的位置与文档流无关，因此不占据空间。绝对定位后会脱离文档流，与其他元素重叠。例如，蓝色块绝对定位后相对于body向左移动30px定位，因为它的两个父元素都没有定位。如果给它的父元素加上定位，它就会相对于红色块来移动定位。
四、fixed：固定定位元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的，它也不会移动。
fixed定位使元素的位置与文档流无关，因此不占据空间。fixed定位的元素与其他元素重叠。例如，红色块相对于浏览器窗口位置是固定的。
