css position详解,css的transition滑动效果
大家好,关于css position详解很多朋友都还不太明白,不过没关系,因为今天小编就来为大家分享关于css的transition滑动效果的知识点,相信应该可以解决大家的一些困惑和问题,如果碰巧可以解决您的问题,还望关注下本站哦,希望对各位有所帮助!
css的position的属性有哪些
position属性指定了元素的定位类型。它有五个属性,分别是
static:HTML元素的默认值,即没有定位,遵循正常的文档流对象。静态定位的元素不会受到 top, bottom, left, right影响。
relative:相对定位元素的定位是相对其正常位置。
fixed:元素的位置相对于浏览器窗口是固定位置。注:即使窗口是滚动的也不会移动
absolute:绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于<html>。注:定位使元素的位置与文档流无关,因此不占据空间。定位的元素和其他元素重叠。
sticky:基于用户的滚动位置来定位。粘性定位的元素是依赖于用户的滚动,在 position:relative与 position:fixed定位之间切换。它的行为就像 position:relative;而当页面滚动超出目标区域时,它的表现就像 position:fixed;,它会固定在目标位置。元素定位表现为在跨越特定阈值前为相对定位,之后为固定定位。
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的定义和用法
background-position属性设置背景图像的起始位置。
这个属性设置背景原图像(由 background-image定义)的位置,背景图像如果要重复,将从这一点开始。
提示:您需要把 background-attachment属性设置为 fixed,才能保证该属性在 Firefox和 Opera中正常工作。默认值: 0% 0%继承性: no版本: CSS1 JavaScript语法: object.style.backgroundPosition=center如何定位背景图像:
body{ background-image:url('bgimage.gif');background-repeat:no-repeat;background-attachment:fixed;background-position:center;}
背景位置属性用于设置背景图像的位置,这个属性只能应用于块级元素和替换元素。其中替换元素包括img、input、textarea、select和object。 background-positon:长度单位/关键字;语法中的取值包括两种,一种是采用长度单位,另一种是关键字描述。长度单位指的是px、百分比等。当background-position取值为关键字时,也需要设置水平方向和垂直方向的值,只不过值不是使用px为单位的数值,而是使用关键字代替。属性值说明top left左上top center靠上居中top right右上left center靠左居中center center正中right center靠右居中bottom left左下bottom center靠下居中bottom right右下
关于css position详解和css的transition滑动效果的介绍到此就结束了,不知道你从中找到你需要的信息了吗 ?如果你还想了解更多这方面的信息,记得收藏关注本站。