相对定位和绝对定位 left和margin-left

1.直接在css中设置left生效的前提是必须设置父容器position:absolute或relative，如果不设置则会显示为最近一个定位的父对象左边相关的位置, margin-left则只会出现在父对象的左边的相对位置，不考虑是否设置了position 。

2，通常情况下，我们元素的position属性的值默认为static 就是没有定位，这个时候你给这个元素设置的left,right,bottom,top这些偏移属性都是没有效果的，z-index属性这时也不会有效。

3，对某元素设置了相对定位，它移动后仍占据着原来的空间，不会被其他块填补掉，它的偏移也不会把别的块从文档流中原来的位置挤开，会叠在其他元素之上，可用z-index调。

被设置了绝对定位的元素不占空间，原位置被删除，也可用z-index来设置它们的堆叠顺序。

4，设置为相对定位的元素，会相对于它的起点进行移动。

    设置为绝对定位的元素，绝对定位是“相对于”最近的已定位（非static，即relative,absolute或fixed）祖先元素，如果不存在已定位的祖先元素，那么会“相对于”<body>进行定位。

时间： 2025-01-12 05:39:04

相对定位和绝对定位 left和margin-left的相关文章

div+css相对定位和绝对定位

今天突然发现自己在布局的时候思路很乱,于是毅然决然的想要重新的理一下自己的布局思路,今天就先从定位开始吧~ 绝对定位(absolute):将被赋予此定位方法的对象从文档流中拖出,如果对象的父级没有设置定位属性,则依据body对象左上角作为参考进行定位.绝对定位对象可层叠,层叠顺序可通过z-index属性控制,z-index值为无单位的整数,大的在最上面,可以有负值(目前负值FF不支持). 同时z-index仅能在定位元素上奏效!!! 相对定位(relative):对象不可层叠,依据left,ri

css相对定位和绝对定位

<html> <head> <title>css相对定位和绝对定位</title> <style type = "text/css" > body,div { margin:0; padding:0; height:2000px; } #div1 {   width:200px; height:200px; background-color: red; position:absolute;  z-index:2; /* lef

秒懂相对定位与绝对定位，【组合拳relative,absolute】 瞬间清醒有木有？

上文:组合拳 层级关系为: <div ----------- position:relative; 不是最近的祖先定位元素,不是参照物 <div----------没有设置为定位元素,不是参照物 <div-------- position:relative 参照物 <div box1 <div box2 --–position:absolute; top:50px; left:120px; <div box3 效果图: 为改变参照物(橘色框)后的效果 层级关系为: &l

辛星和你彻底搞清CSS中的相对定位和绝对定位

前面我在解读CSS中也说过了关于相对定位和绝对定位的问题,无奈还是有些童鞋表示迷茫,于是另开一篇博客,来详细解读相对定位和绝对定位,希望能够以我的点点星光,让后来者少走弯路. 所谓相对定位,就是设置为相对定位的元素会偏移某个距离,元素仍然保持原来的样式,它会保留该HTML元素的空间,比如我们看如下代码: .demo{ position: relative; width:50px; height: 50px; left:50px; } 它会出现在相对原来的地方向右50px的地方,而它原来所在的地方

相对定位vs绝对定位

<!-- -->相对定位,position: relative; 它会,相对它原来的位置的坐标的左上角,进行偏移.同时,它原来的位置会被保留. (相对定位的html容器,它虽然已经脱离了普通的文档流,但它依然被视为普通文档流定位的一部分.) 口语化的描述,"我人不在这,但位置你得给我留着". <!-- --> 绝对定位,position:absolute; 它会,相对于整个文档的左上角原点的坐标,进行偏移.同时,它原来的位置,不会被保留. (就是被添加了绝对定位

开发中如何合理使用CSS的相对定位和绝对定位

在谈论如何使用时.我们先来看看CSS对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用.relative:对象遵循正常文档流,但将依据top,right,bottom,left等属性在正常文档流中偏移位置.而其层叠通过z-index属性定义.absolute:对象脱离正常文档流,使用top,right,bottom,left等属性进行绝对定位.而其层叠通过z-index属性定义. 什么是文档流? 文档流是将

CSS——相对定位、绝对定位、固定定位

相对定位: 当元素被设置相对定位或是绝对定位后,将自动产生层叠,他们的层叠级别自然的高于文本流,除非设置其z-index值为负值. 并且我们发现当相对定位元素进行位移后,表面来看已经脱离了文本流,但是实际上在本文流中还为原来的相对对定位留下了原有的总宽与总高. 绝对定位: 相对定位只可以在文本流中进行位置的上下左右的移动,同样存在一定的局限性,虽然他的表现区脱离了文本流,但是在文本流却依然为其保留了一席之地,这个位置不随他的移动而改变. 如果希望文本流抛弃这个部分就需要用到绝对定位.绝对定位不光

CSS定位深入理解 完全掌握CSS定位 相对定位和绝对定位

其实前面的标准流和浮动流都很理解,就是定位不太好理解,特别是相对定位和绝对定位,很多刚开始学的同学不好区分.因此这里,小强老师和大家一起分享CSS定位的学习. 通过我们前面的学习,我们网页布局方法: 1. 标准流   (最稳定) 2. 浮动流   (float 其次) 3. 定位流    ( 稳定性最后) 定位是完全脱离标准流的一种布局方式. 其实前面的标准流和浮动流都很理解,就是定位不太好理解,特别是相对定位和绝对定位,很多刚开始学的同学不好区分.因此这里,小强老师和大家一起分享CSS定位的学

CSS定位（CSS定位概述、相对定位、绝对定位、浮动）

CSS 定位属性 CSS 定位属性允许你对元素进行定位. 属性 描述 position 把元素放置到一个静态的.相对的.绝对的.或固定的位置中. top 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移. right 定义了定位元素右外边距边界与其包含块右边界之间的偏移. bottom 定义了定位元素下外边距边界与其包含块下边界之间的偏移. left 定义了定位元素左外边距边界与其包含块左边界之间的偏移. overflow 设置当元素的内容溢出其区域时发生的事情. clip 设置元素的

相对定位与绝对定位的理解

一.相对定位:如果对一个元素进行相对定位,它将出现在它所在的位置上,通过设置垂直或水平位置,让这个元素"相对于"它的起点进行移动.默认相对值是body.注意,在使用相对定位时,无论是否进行移动,元素仍然占据原来的空间.因此,移动元素会导致它覆盖其它框.检查元素看body可知.个人理解:这个相对是相对的元素本身,之所以设置是使得left,top等能起作用,并且使用relative任然占据原来的空间,即从元素本来所存在的位置到元素移动的位置,那很多行里面都不会有其他的元素与他并列,即它所在