css position用法(css中position属性值有哪些)
大家好,关于css position用法很多朋友都还不太明白,不过没关系,因为今天小编就来为大家分享关于css中position属性值有哪些的知识点,相信应该可以解决大家的一些困惑和问题,如果碰巧可以解决您的问题,还望关注下本站哦,希望对各位有所帮助!
CSS position属性
position很重要,有以下几个值:static,relative,absolute,fixed。
*所有主流浏览器都支持 position属性,这个属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。
static:静态定位。如果你没有设置position属性,那么缺省就是static。top,left,bottom,right等属性,在static的情况下是无效的,要使用这些属性,必须把position设置为其他三个值之一。
relative:相对定位。元素将按照静态定位时的位置进行调整,在静态定位中分配给元素的空间仍然会分配给它,它两边的元素不会向它靠近来填充那个空间,但它们也不会从元素的新位置被挤走。
absolute:绝对定位。元素将按照包含它的元素的位置进行调整,比如它嵌套在另一个绝对定位的元素中,那么就相对于那个元素定位。
fixed:固定定位。元素将被设置在浏览器上一个固定位置上,不会随其他元素滚动。形象点说,上下拉动滚动条的时候,fixed的元素在屏幕上的位置不变。需要注意的是IE6并不支持此属性。
注意:很多网页都是居中的,这样,当对元素进行绝对定位的时候,在不同的分辨率下显示会有偏差,这时,我们可以通过类似下面的方法来处理:
<div style="position: relative;">
<div style="position: absolute; top: 10px; left: 10px;"></div>
</div>
CSS background-position的用法
是用来定位图片的位置的,最主要使用在一张png上有多个logo或者 ico这个时候就用到background-position了。
background-position:x y x等于平行轴 y等于竖行轴,x y的取值可以为正数,也可以是负数。
background-position: left-29px;是背景位移,background-position后面有两个属性,第一个是水平位置,第二个是垂直方向的位置,这里需注意的是两个属性的顺序
比如:
background-position: left-29px;(当中的left指从图片的最左端读起,-29px就是将图片向上移动29px,然后开始读)
扩展资料:语法
background-position: length|| length
background-position: position|| position
取值
length:百分数|由浮点数字和单位标识符组成的长度值。
position: top| center| bottom| left| center| right
注:设置或检索对象的背景图像位置,必须先指定 background-image属性,该属性定位不受对象的补丁属性( padding)设置影响。
默认值为: 0% 0%。此时背景图片将被定位于对象不包括补丁( padding)的内容区域的左上角,如果只指定了一个值,该值将用于横坐标,纵坐标将默认为 50%,如果指定了两个值,第二个值将用于纵坐标。
如果设置值为 right center,因为 right作为横坐标值将会覆盖 center值,所以背景图片将被居右定位,对应的脚本特性为 backgroundPosition。
css的position的属性有哪些
position属性指定了元素的定位类型。它有五个属性,分别是
static:HTML元素的默认值,即没有定位,遵循正常的文档流对象。静态定位的元素不会受到 top, bottom, left, right影响。
relative:相对定位元素的定位是相对其正常位置。
fixed:元素的位置相对于浏览器窗口是固定位置。注:即使窗口是滚动的也不会移动
absolute:绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于<html>。注:定位使元素的位置与文档流无关,因此不占据空间。定位的元素和其他元素重叠。
sticky:基于用户的滚动位置来定位。粘性定位的元素是依赖于用户的滚动,在 position:relative与 position:fixed定位之间切换。它的行为就像 position:relative;而当页面滚动超出目标区域时,它的表现就像 position:fixed;,它会固定在目标位置。元素定位表现为在跨越特定阈值前为相对定位,之后为固定定位。
关于css position用法,css中position属性值有哪些的介绍到此结束,希望对大家有所帮助。