Rumah >hujung hadapan web >tutorial css >html CSS中的相对定位和绝对定位使用总结
html CSS中的相对定位和绝对定位使用总结
- 零下一度asal
- 2017-06-05 14:09:024735semak imbas
定位，指确定方位；确定或指出的地方；确定场所或界限（如通过勘察）给这个地产的界限定位。
在CSS中关于定位的内容是：position:relative | absolute | static | fixed。static 没有特别的设定，遵循基本的定位规定，不能通过z-index进行层次分级。在本文流中，任何一个元素都被文本流所限制了自身的位置，但是通过CSS我们依然使得这些元素可以改变自己的位置，我们可以通过float来让元素浮动，我们也可以通过margin来让元素产生位置移动。
层级关系为：
一般如果我们不给元素设置position，则默认为static，此时是该元素是没有定位的，像left/right这些偏移属性都是没有效果的。 因为元素的位置相对于它在普通流中的位置。绝对定位的元素的位置相对于最近的已定位祖先元素， 未被设置定位之前是大盒子包裹着小盒子，符合标准文档流，如图片所示 相对定位（relative）： 先说相对定位：跟它的名一样，相对嘛，要有一个参照物，但这个参照不是别的，是它自己在原来文档流中的位置。相对定位之后的对象并没有完全从文档流中脱离，这个对象原来在文档中的位置保留着（站着茅坑不拉屎），偏移后的对象会把其它的层遮罩住。 CSS 有三种基本的定位机制：普通流、浮动和绝对定位。 除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。 块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。 6. 总结css中常见的四个定位属性（left right top bottom） DIV CSS left right top bottom定位 这四个CSS属性样式用于定位对象盒子，必须定义position属性值为absolute或者relative。 Left 当前元素的左侧与父元素左侧(就是原来默认位置)的距离值。 Right 当前元素的右侧与父元素右侧的距离值。 Top 当前对象顶部距离原位置顶部距离多少。 Bottom 当前对象底部距离原位置距离多少 7. 解析css的position里的relative和absolute的区别 position有以下属性：static、inherit、fixed、absolute、relative 比较常用而且会引起初学者迷惑的是absolute和relative，它俩有什么分别呢？ .position:relative;相对对位 不影响元素本身的特性； 不使元素脱离文档流； 如果没有定位偏移量，对元素本身没有任何影响； 定位元素位置控制：top/right/bottom/left； IE6下父级的overflow：hidden是包不住子集的相对定位；解决只需要 给父级就加上定位元素； 在IE6下定位元素的父宽高都为奇数时，定位元素的bottom和right会有 1px的偏差 9. CSS Positioning(定位) | CSS 在线手册 CSS定位属性允许你为一个元素定位。它也可以将一个元素放在另一个元素后面，并指定一个元素的内容太大时，应该发生什么。 元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法. 有四种不同的定位方法。 相关问答： 1. html - css定位如何实现微信下方的红色消息 在不同的手机宽度 是如何定位的 2. css - HTML定位问题 百分数 和 padding marggin border的冲突 【相关文章推荐】： Atas ialah kandungan terperinci html CSS中的相对定位和绝对定位使用总结. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。
前三个好理解好区分：
static：是默认状态，没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
nherit：从父元素继承 position 属性的值。
fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。（即滚动浏览器的时候，元素永远固定显示在窗口可视区的某个位置）。