css中postion的fixed和absolute区别

一直对positon的几个定位方式不是特别理解,记录下

fixed

固定定位,参照位置是浏览器窗口的左上角,即坐标点为(0px, 0px)

absolute

绝对定位,参展位置是离当前元素最近的定位方式为fixed,absolute,relative的祖先原则的左上角,举个例子

<div style="posistion:relative" id="p1">
    <div style="posistion:fixed" id="p2">
        <div style="position:static" id="p3">
            <h2 style="postion:absolute;left:10px;top:10px">我的参照坐标是id=p2</h2>
        </div>
    </div>
</div>

通过上面的例子,可知h2的绝对定位参照点是id=p2的父元素,p3是静态的static定位,不能当作定位点

原文地址:https://www.cnblogs.com/baimeishaoxia/p/12683750.html

时间: 2024-10-29 07:27:21

css中postion的fixed和absolute区别的相关文章

彻底弄懂css中单位px和em的区别(转)

国内的设计师大都喜欢用px,而国外的网站大都喜欢用em,那么两者有什么区别,又各自有什么优劣呢? 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em作为字体单位: 3. Firefox能够调整px和em,但是96%以上的中国网民使用IE浏览器(或内核). px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的.(引自CSS2.0手册) em是相对长度单位.相对于当前对象内文本的字体尺寸.如当前对行内文本的字体尺寸未被人为

css中margin和padding的用法区别

谈到css中的margin和padding这两个我们几乎每个页面都会用到的属性,我们有必要先来了解一下margin和padding 1.什么是margin和padding 谈到margin和padding我们就有必要了解一下css盒模型 (Box Model) 根据上面的这张图我们可以很清晰的看到,margin用来设置外边距,padding用来设置内边距 啥是外边距和内边距,我们看下w3c上面的官方说明: css外边距: 围绕在元素边框的空白区域是外边距.设置外边距会在元素外创建额外的“空白”.

css中单位 px、em 的区别【转载】

原文:http://www.admin10000.com/document/6267.html 在国内网站中,包括三大门户,以及“引领”中国网站设计潮流的蓝色理想,ChinaUI等都是使用了px作为字体单位.只有百度好歹做了个可调的表率.而 在大洋彼岸,几乎所有的主流站点都使用em作为字体单位,也就是可调的.没错,px比em更加容易使用,大部分读者不知道em为何物或者它相当于多少 px.国外人士如此重视网站易用性(Accessibility),不仅因为其根生蒂固的人文精神,直接原因可能是因 为有

(转)实例详解CSS中position的fixed属性使用

关于fixed属性,在什么情况下需要用,怎么用,首先,我们应该先了解下fixed属性的说明:fixed总是以body为定位时的对象,总是根据浏览器的窗口来进行元素的定位,通过"left". "top". "right". "bottom" 属性进行定位. 那么,我们了解了fixed属性的说明后,就可以知道它的作用了.当我们需要使一个层相对于浏览器来自动调整该层的位置的时候,如果你使用position的absolute属性来定位

CSS中@import与link的具体区别

我们知道在网页中引用外部CSS有两种方式:@import和link 我们也经常听到有人说要使用link来引入CSS更好,但是你知道为什么吗? 继续往下看 link:link就是把外部CSS与网页连接起来. @importimport文字上与link的区别就是它可以把在一个CSS文件中引入其它几个CSS文件. 为什么使用@import大部分使用@import方式的人是因为旧的浏览器是不支持@import方式的,这意味着我们可以使用@import来引入只让现代浏览器解析的CSS样式.另一个主要的原因

css中的position:relative和absolute 属性

语法: position : static | absolute | fixed | relative 取值: static :默认值.无特殊定位,对象遵循HTML定位规则 absolute :将对象从文档流中拖出,使用 left , right , top , bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位.如果不存在这样的父对象,则依据 body 对象.而其层叠通过 z-index 属性定义 fixed :未支持.对象定位遵从绝对(absolute)方式.但是要遵守

css中的相对定位与绝对定位的区别

1.绝对定位 position: absolute;绝对定位:绝对定位是相对于元素最近的已定位的祖先元素(即是设置了绝对定位或者相对定位的祖先元素).如果元素没有已定位的祖先元素,那么它的位置则是相对于最初的包含块(body). 绝对定位与文档流无关,所以它们可以覆盖页面上其他的元素,可以通过z-index属性来控制这些层的对方顺序. 2.相对定位 position: relative;相对定位:相对定位是相对于元素在文档中的初始位置: 注意,在使用相对定位时,无论是否进行移动,元素仍然占据原来

css中双冒号和单冒号区别

:——是指的伪类 ::——是指的伪元素 1.字面意思: 伪类,1.css中有类选择器,某些元素并未定义类名,就可以通过伪类赋予样式,如:[:nth-child(n)]:2.伪类可以应用于元素执行某种状态,如:[:hover]鼠标经过元素时 伪元素,创建一个新元素应用于文档,但是并不存在于文档中. 常见的伪元素选择器:  ::first-letter 选择元素文本的第一个字(母).  ::first-line 选择元素文本的第一行.  ::before 在元素内容的最前面添加新内容.  ::aft

CSS中的height与line-height的区别

<p class='text'>高与行高的区别</p> 那么我要想让这些字上下居中那么可以用宽度和行高控制 .text{ height:25px; line-height:25px; } 什么是行高? 行高不是每行直接的间距 行高指的是文本行的基线间的距离. 就是每行文字下边与下一行文字的下基线之间距离 原文地址:https://www.cnblogs.com/sui776265233/p/9403690.html