`

css中position的理解

    博客分类:
  • Web
阅读更多

position:static、relative、absolute、fixed

static:没有定位,元素出现在正常的流中。position的缺省值,设置position:static的情况下,left、top、right、bottom无效。

relative:生成相对定位的元素,相对于其正常位置进行定位。因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。

absolute:生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。使用absolute时要注意它的非static定位的父元素是谁,这样才可以正确的出效果。

fixed:生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可以用来设置永远悬浮在同一个位置的广告栏、置顶按钮等。

inherit:规定应该从父元素继承position属性的值。

注意:left、top、right、bottom只在非static的情况下有效。

分享到:
评论

相关推荐

    CSS Position

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

    深入理解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`属性起着至关重要的作用。它用于定义元素如何在页面上定位,决定了元素是否会被其他元素所影响,或者它是否会覆盖其他元素。`position`属性共有四种取值:`relative`、`absolute`、`fixed` ...

    css中position:relative和overflow:hidden的问题

    总之,`position:relative`和`overflow:hidden`是CSS布局中的两个关键工具,理解它们的工作原理以及如何相互作用,对于提高网页设计和开发的能力至关重要。在实际项目中,我们需要根据具体需求灵活运用这两个属性,...

    css中position:fixed实现div居中上下左右居中

    在这段CSS代码中,首先设置了.dialog类的position属性为fixed,确保该DIV相对于视口定位。接着,通过设置top: 50%和left: 50%属性,将DIV元素的左上角定位到视口的中心位置。然后,通过设置margin负值来调整DIV元素...

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

    总结来说,批量输出CSS `background-position`属性的定位像素值是一个涉及到CSS理解、单位转换和自动化处理的技术任务。通过适当的工具和技术,你可以高效地统一和优化大量元素的背景图像位置,提高工作效率,并确保...

    CSS中的position 的值: absolute 与 relative

    在CSS(层叠样式表)中,`position`属性是一个至关重要的概念,它用于定义元素在页面布局中的定位方式。`position`属性有多个可选值,其中`absolute`和`relative`是两个最常使用的值,它们在网页设计中扮演着关键...

    IE6下的纯CSS完美position:fixed实现

    在互联网早期,Internet Explorer 6 (IE6) 是一个广泛使用的浏览器,但它的CSS支持并不完善,特别是对于`position: fixed`属性。`position: fixed`在现代浏览器中用于创建固定定位元素,使得元素相对于视口...

    CSS-position(定位)

    总的来说,理解并熟练掌握CSS-position的这些属性对于创建动态、响应式的网页至关重要。不同的定位方式提供了不同的灵活性,帮助开发者创造出丰富多样的网页布局。在实践中,根据项目需求选择合适的定位方式,结合...

    CSS2.0 中文手册

    7. **列表样式**:CSS2.0可以改变列表项的标记(list-style-type)、图像(list-style-image)以及位置(list-style-position)。 8. **表格样式**:CSS2.0提供了控制表格布局、边框合并和单元格间距的方法,如`border-...

    HTML CSS——position学习终结者(二).zip

    `position`属性是CSS中一个至关重要的概念,它控制着元素在页面上的定位方式。在这个“HTML CSS——position学习终结者(二)”的资料中,我们预计将深入探讨`position`的各种用法和技巧。 首先,`position`属性用于...

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

    总的来说,通过理解并应用`position: fixed`以及相关的CSS布局技巧,我们可以轻松地实现div在浏览器窗口中的居中效果。这在构建响应式设计或者需要元素始终显示在可视区域中央的场景中尤其实用。

    css的position里的relative和absolute的区别.docx

    在 CSS 中,position 属性 plays a crucial role 在排版元素中。在 position 属性中,有五个值:static、inherit、fixed、absolute 和 relative。今天,我们将深入探讨 relative 和 absolute 两个值的区别。 首先,...

    CSS中背景图片定位方法:background-position的用法

    总之,`background-position`是CSS中用于控制背景图片位置的强大工具,结合不同的值类型和组合,开发者可以创造出丰富的视觉效果。熟练掌握其用法和算法,能有效提升网页设计的灵活性和精细度。

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

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

    CSS2 中文手册CSS2 中文手册

    虽然媒体查询(media queries)在CSS3中得到扩展,但CSS2也提供了一些基本的媒体类型,如`screen`和`print`,允许开发者针对不同类型的输出设备定制样式。 总的来说,CSS2中文手册是一份宝贵的参考资料,它涵盖了...

Global site tag (gtag.js) - Google Analytics