`

CSS中的Position属性

css 
阅读更多
[size=large]CSS的Position很重要,有以下几个值:static,relative,absolute,fixed。

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>
[/size]
分享到:
评论

相关推荐

    深入理解css中position属性及z-index属性(推荐)

    CSS中的position属性用于指定元素在文档流中的定位方式,它决定了元素在页面上的布局和交互方式。position属性包含四个可能的值:static、fixed、relative、absolute,下面逐一详细说明。 1. static定位:这是...

    深入理解css中position属性及z-index属性1

    在CSS布局中,`position`属性是至关重要的,它决定了元素在页面上的定位方式。`position`有四个主要的值:`static`、`fixed`、`relative`和`absolute`,还有一个较新的值`sticky`,不过在这里我们主要讨论前四个。 ...

    图解CSS中position属性的定位用法

    其中,CSS position 属性可以取5种值:position: absoluteposition: relativeposition: fixedposition: staticposition: inheritstatic 是 position 默认的属性值。任何应用了 position:static 的元素都处于常规文档...

    CSS中position属性之fixed实现div居中

    在CSS布局中,`position`属性是一个至关重要的概念,它决定了元素如何在页面上定位。`position`属性有多个值,如`static`、`relative`、`absolute`和`fixed`,每种都有其特定的用途。在这个场景中,我们主要关注的是...

    批量输出 CSS background-position 属性的定位像素值

    在CSS中,`background-position`属性是一个非常重要的部分,它控制着背景图像在元素内的位置。这个属性允许我们精确地定位背景图像,从而实现各种视觉效果。 批量输出`background-position`属性的定位像素值通常是...

    举例详解CSS中position属性的使用

    CSS(层叠样式表)是一种用于描述网页呈现样式的语言,而position属性是CSS中用于控制元素位置的重要属性。position属性定义了元素的定位类型,其不同的值决定了元素在页面上的定位方式,以及它与其他元素的相对关系...

    详解CSS中position属性介绍(新增sticky)

    在CSS布局中,`position`属性是一个至关重要的概念,它决定了元素在页面上的定位方式。本文将详细解析CSS中的`position`属性,并特别关注CSS3新增的`sticky`值。 首先,`position`属性的基本用法是设定元素的定位...

    css中position属性使用详解

    positon有4个属性:static relative absolute fixed,我们都知道absolute是绝对定位,relative是相对定位,但是这个绝对与相对是什么意思呢?绝对是什么地方的绝对,相对又是相对于什么地方而言的呢?那他们又有什么...

    CSS的position属性在DIV层中的应用

    在网页设计中,CSS的position属性是一个非常重要的属性,它允许开发者控制元素在页面上的定位方式。position属性有几个值:static、relative、absolute、fixed以及最近添加的sticky。 1. static:这是position属性...

    DIV CSS布局中position属性用法深入探究

    本文向大家描述一下DIV CSS布局中的position属性的用法,position属性主要有四种属性值,任何元素的默认position的属性值均是static,静态。这节课主要讲讲relative(相对)以及absolute(绝对)。 如何学习DIV+CSS...

    打造节日氛围:使用CSS `position` 属性创建圣诞树和装饰

    通过使用CSS的position属性,我们可以轻松地定位和装饰一棵圣诞树。通过添加动画效果和响应式设计,我们可以进一步增强视觉效果和用户体验。这个简单的项目不仅可以帮助你掌握CSS定位技巧,还可以为你的网站或应用...

    CSS Position

    "CSS Position"是一个关键概念,它决定了元素在页面上的位置和排列方式。理解并掌握CSS定位对于创建响应式、动态且布局精确的网页至关重要。 **定位模式** CSS提供了几种定位模式,包括静态定位(static)、相对...

    float与position属性

    " Float与Position属性" Float 与 Position 属性是 CSS 中两个重要的概念,它们可以帮助开发者建立复杂的布局,实现多年的梦想。通过这两个属性,可以将布局的一部分与另一部分重叠,还可以完成多年来通常需要使用...

Global site tag (gtag.js) - Google Analytics