`

position属性详解

    博客分类:
  • Web
阅读更多

 position 属性规定元素的定位类型,这个属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。 
属性说明: 
1 absolute:生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 

2 fixed 生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 

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

4 static 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。 
5 inherit 规定应该从父元素继承 position 属性的值。(ie中未支持此属性) 

所有空间position的默认值为static,所以需要将其设置为其他属性 可进行定位 

若有多个层 切需要设定层的层次关系 那么需要设置z-index属性 

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。 

注释:元素可拥有负的 z-index 属性值。 

注释:Z-index 仅能在定位元素上奏效( position的值非static)! 

说明 
该属性设置一个定位元素沿 z 轴的位置,z 轴定义为垂直延伸到显示区的轴。如果为正数,则离用户更近,为负数则表示离用户更远。 

分享到:
评论

相关推荐

    div的position属性

    ### div的position属性详解 #### 一、流动模型(块元素与内联元素) 流动模型是CSS布局的基础,指的是在没有特别指定定位方式的情况下,元素按照文档流的自然顺序排列。 - **块元素**:默认情况下,每个块元素...

    2.2.38 CSS列表属性(三)列表项目符号位置:list-style-position.docx

    CSS 列表属性 - list-style-position 属性详解 在 CSS 中,列表属性 play 一个非常重要的角色,因为它们可以帮助我们更好地控制列表的样式。今天,我们将要探讨的就是 list-style-position 属性,该属性可以控制...

    详解html中 position属性用法(四种)

    position的四个属性值: 1.relative 2.absolute 3.fixed 4.static 下面分别讲述这四个属性。 <div id=sub1>sub1 <div id=sub2>sub2 1. relative relative属性相对比较简单,我们要搞清它是相对哪个对象来进行...

    css属性详解说明,css属性详解说明

    ### CSS属性详解 #### 背景属性 (Background Properties) **1. background** - **简介:** `background` 是一个简写属性,用于在单个声明中设置一系列背景相关的属性。 - **用法示例:** ```css .example { ...

    CSS position属性absolute relative等五个值的解释

    《CSS position属性详解:absolute, relative及其他值》 在网页设计中,CSS(层叠样式表)的position属性是至关重要的,它决定了元素在页面上的布局方式。position属性有五个基本值:static、relative、absolute、...

    css_position用法详解

    ### CSS `position` 属性详解 #### 一、引言 在网页布局中,`position` 属性是非常重要的一个概念,它控制了元素在页面上的定位方式。通过不同的定位值,我们可以实现各种复杂的布局效果。本文将详细介绍 `...

    html定位属性详解

    ### HTML定位属性详解 在网页设计与开发领域,掌握HTML元素的定位机制是构建美观、功能性和响应式网站的关键。本文将深入解析HTML中的定位属性,重点探讨**相对定位**和**绝对定位**,并结合CSS中的偏移属性(如`...

    css中的定位

    #### CSS Position属性详解 `position` 属性用于指定元素的定位类型,主要有以下几种: - **Static**:这是默认值,元素按照正常文档流进行布局。 - **Relative**:相对定位,元素相对于自身正常位置进行偏移,但...

    HTML热门面试题及详细解析

    Position 属性详解: Position 属性有四个常见的属性值:relative, absolute, fixed, static。 1. Static:默认位置,设置为 static 的元素,它始终会处于页面流给予的位置(static 元素会忽略任何 top、bottom、...

    CSS初学者教程(全套)

    ### CSS初学者教程之Position属性详解 #### 一、引言 在网页设计与开发过程中,CSS (Cascading Style Sheets) 是一种用于定义HTML或XML文档中元素样式的语言,能够极大地提升网页的视觉效果及用户体验。对于前端...

    CSS之Position详解

    ### CSS之Position详解 在CSS布局中,`position`属性起着至关重要的作用。它用于定义元素如何在页面上定位,决定了元素是否会被其他元素所影响,或者它是否会覆盖其他元素。`position`属性共有四种取值:`relative`...

    PB8属性详解,含第四章

    第四章“控件属性详解”是深入理解PB8开发的关键章节,因为属性的熟练掌握直接影响到程序的功能和用户体验。 首先,我们需要了解PB8中的基本控件类型,如窗口(Window)、数据窗口(DataWindow)、按钮(Button)、...

    前端布局-Position详解

    ### 前端布局-Position详解 #### 一、引言 在Web开发中,页面布局至关重要,良好的布局能够使网站既美观又实用。CSS提供了多种布局方式,其中相对定位(relative positioning)和绝对定位(absolute positioning)是...

    css中position属性使用详解

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

    一个很炫的分页导航条display+position属性

    #### 二、`position`属性详解 `position`属性用于定义元素的位置。这里我们主要关注`position: relative;`和`position: absolute;`这两个值: - **`position: relative;`**:相对定位。元素相对于其正常位置进行...

    前端笔试题(二十四)答案版.docx

    **Position 属性详解** - **Static** - 描述:默认值,元素遵循正常文档流。 - 位置调整:不受 top、right、bottom 和 left 属性的影响。 - **Relative** - 描述:相对于自身正常位置偏移。 - 位置调整:使用...

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

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

    Position属性之relative用法

    《Position属性之relative用法详解》 在网页布局设计中,CSS(层叠样式表)的position属性扮演着至关重要的角色。本文将深入探讨position属性中的relative用法,帮助开发者更好地理解和运用这一特性。 首先,我们...

Global site tag (gtag.js) - Google Analytics