列出display的值，说明他们的作用。position的值， relative和absolute分别是相对于谁进行定位的？...

最新推荐文章于 2025-11-18 11:59:08 发布

转载最新推荐文章于 2025-11-18 11:59:08 发布 · 332 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/3652781/blog/1535119

本文详细介绍了CSS中display属性的各个取值及其效果，包括block、inline、inline-block等，并解释了position属性的不同值如absolute、relative和fixed的作用及特点。

diaplay取值有：

block :设置元素以块样式显示

inline：设置元素以行内形式显示

inline-block：向行内元素一样显示，但内容向块级元素一样

none：隐藏元素，在页面中不占据空间

list-item：向块级一样显示，但添加列表样式

position的值：

absolute：绝对定位元素，相对于第一个祖先定位，可以脱离文档流

relative：相对定位元素，相对与自身定位，不可与脱离文档流，当进行定位时，所占位置不会消失，仍占据。

fixed：固定定位，绝对定位，相对浏览器窗口定位，脱离文档流，当浏览器滚动时，不会动，是固定的

static静态，没有定位

转载于:https://my.oschina.net/u/3652781/blog/1535119

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

chentao3021

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

position:relative/absolute无法冲破的等级

10-31

### Position:relative/absolute无法冲破的等级解析 #### 前言在Web前端开发过程中，元素的定位机制是至关重要的。CSS提供了多种定位方式，包括`static`、`relative`、`absolute`、`fixed`和`sticky`。本文将深入...

区别div和span、relative和absolute、display和visibility

09-25

今天我们将深入探讨容易混淆的三个概念：`div`与`span`、`relative`与`absolute`以及`display`与`visibility`。 1. `div`与`span`的区别： - `div`是一个块级（block-level）元素，它会在页面上占据一整行，并且...

参与评论您还未登录，请先登录后发表或查看评论

写出display的值，说明各自的作用？请写出position的值 relative和absolute分别是相对于谁进行定位的？

kobezzZ的博客

08-01

439

display 的值的作用： 1.block 块类型元素。 2.inline 行内元素类型。 3.inline-block 行内块元素类型。 4.list-item 象块类型元素一样，并添加样式列表标记。 position 的值的定位区别： 1.absolute 生成绝对定位的元素，相对于 static 定位以外的第一个祖先元素进行定位。 2.fixed 生成绝对定位的元素，相对于浏览器窗口进行定...

position的值， relative和absolute分别是相对于谁进行定位的

weixin_30332241的博客

09-04

606

absolute:生成绝对定位的元素， 相对于最近一级的定位不是 static 的父元素来进行定位。 fixed（老IE不支持）生成绝对定位的元素，通常相对于浏览器窗口或 frame 进行定位。 relative生成相对定位的元素，相对于其在普通流中的位置进行定位。 static默认值。没有定位，元素出现在正常的流中 sticky生成粘性定位的元素，容器的位置根据正常文档流计算...

CSS中position和display 用法和区别对比

最新发布

bsklhao的博客

11-18

409

position：适用于需要精确控制元素位置的场景，尤其是动态交互（如滚动吸附、固定定位）。通过是否脱离文档流和参考对象的不同，实现灵活的定位逻辑[5][6display：用于定义元素的布局角色，例如将行内元素强制转为块级以便于设置宽高，或使用 flex/grid 构建复杂排列。其核心在于改变元素的默认布局行为[2][3。

列出display的值，说明他们的作用。position的值，relative和absolute定位原点是？

LuckXinXin的博客

02-29

364

block 象块类型元素一样显示。 none缺省值。象行内元素类型一样显示。 inline-block象行内元素一样显示，但其内容象块类型元素一样显示。 list-item象块类型元素一样显示，并添加样式列表标记。 position的值 *absolute 生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。 *fixed（老的IE不支持）生成绝对定位的元素，相对于浏览...

display有哪些值？说明他们的作用。

秃头少女

09-21

2906

block 此元素将显示为块级元素，此元素前后会带有换行符。 none 此元素不会被显示。 inline-block 行内块元素。 list-item 此元素会作为列表显示。 table 此元素会作为块级表格来显示 inherit ...

Position的值有哪些？relative和absolute分别是相对于谁进行定位的？

weixin_45574166的博客

12-09

1527

1.absolute 生成绝对定位的元素，相对于最近的一级的定位，不是static的父元素进行定位（是相对于离它最近的一个已定位的盒子进行定位的，默认是body。position必须是absolute或者relative的祖先元素） 2.fixed 生成绝对定位元素，通常相对于浏览器窗口或者frame进行定位。 3.relative 生成先对定位的元素，相对于普通流中的位置进行定位（相对于本元素原始位置进行定位）。 4.static 默认值，没有定位，元素出现在正常流中。 5.sticky 生成粘性

浅谈CSS中display/float/position属性值的相互影响

09-24

其主要值有`static`（默认值，遵循正常文档流）、`relative`（相对于其原本的位置进行定位）、`absolute`（相对于最近的非`static`定位祖先元素定位）和`fixed`（相对于浏览器窗口定位，即使在滚动时也保持位置不变...

详解CSS 子元素相对于父元素固定定位解决方案

11-19

在CSS布局中，子元素相对于父元素的固定定位是一个常见的需求，这主要涉及到CSS的定位机制，包括绝对定位和相对定位。本篇文章将详细解析如何实现这个目标。首先，我们来回顾一下绝对定位（absolute）和相对定位...

position的值， relative和absolute分别是相对于谁进行定位，你真的知道吗？

热门推荐

yiyueqinghui的博客

09-19

1万+

常见的position定位方式如下: static 默认值。元素出现在正常的普通流中 relative 生成相对定位的元素，相对于其在普通流中的位置进行偏移。 fixed （老IE不支持）生成绝对定位的元素，通常相对于浏览器窗口或 iframe 进行定位。 inherit 继承父元素的position属性，但需要注意的是IE8以及往前的版本都不支持inherit属性。 absolute 生成绝对定位的元素， 相对于最近一级的不是 static 的父元素来进行定位,如果没有找到的话，最

position的值，relative和absolute分别相对谁定位

qq_43378240的博客

11-28

587

absolute：生成绝对定位的元素，定位原点是离自己这一级元素最近的一级position设置为absolute或者relative的父元素的左上角为原点的，若没有此类父元素就往上找直到body。 relative：生成相对定位的元素，定位原点是元素本身所在位置。 fixed （老IE不支持）：生成固定定位的元素，相对于浏览器窗口进行定位。 static：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right z-index 声明）。 inherit：规定从父元素继承

position的值，relative和absolute分别相对于什么定位

michael8512的博客

09-14

2325

absolute：生成绝对定位的元素， 相对于最近一级的定位不是 static 的父元素来进行定位。 fixed：（老IE不支持）生成绝对定位的元素，通常相对于浏览器窗口或 frame 进行定位。 relative：生成相对定位的元素，相对于其在普通流中的位置进行定位。 static：默认值。没有定位，元素出现在正常的流中 sticky：生成粘性定位的元素

列出display的值，说明他们的作用？position的值， relative和absolute定位原点是？

LuckXinXin的博客

09-07

504

1）display的值 block：像块类型元素一样显示 none ：元素不显示，并且不占据页面空间 inline-block：像行内元素一样显示，但其内容像块类型元素一样显示 inline：像行内元素一样显示 table：像表格一样显示 flex：弹性布局 2）position的值 absolute：绝对定位，相对于 static 以外的第一个父元素进行定位 fixed （老IE不支持）：生成...

列出display的值，说明其作用。position的值， relative和 absolute定位原点是什么？

limeng886549的博客

08-01

1174

1、display 的值的作用：（1）block 象块类型元素一样显示。（2）inline 缺省值。象行内元素类型一样显示。（3）inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。（4）list-item 象块类型元素一样显示，并添加样式列表标记。 2、position 的值的定位区别：（1）absolute 生成绝对定位的元素，相对于 static 定位以外的...

CSS样式表中的position属性取值和作用

KillDrogon的专栏

01-11

2450

一、首先，我们大致看一下CSS样式中position属性的常用取值都有哪些：从Dreamwaver给出的提示中我们可以大致了解到取值方式差不多有6种： 1. absolute绝对定位方式 2. fixed相对浏览器显示区定位方式 3. inherit继承父容器的定位方式 4. relative相对父级容器定位方式 5. static默认

display值的作用分别是什么？relative和absolute分别是相对谁定位的？

麋鹿鲁哟的博客

07-05

898

display值的作用分别是什么？ none：元素隐藏，不占据位置 block：该元素显示为块级元素 inline：默认，该元素会被显示为内联元素 inline-block：行内块元素 list-item：该元素会作为列表显示 run-in：该元素会根据上下文作为块级元素或内联元素显示 table：该元素会作为块级表格来显示 inline-table：该元素会作为内敛表格来显示 ...

CSS学习总结（七）：静态定位、相对定位(relative)、绝对定位(absolute)、固定定位、粘性定位、display 显示、overflow 溢出、visibility 可见性

weixin_62764364的博客

12-07

3310

我们先来看一个效果，同时思考一下用标准流或浮动能否实现类似的效果？场景1：某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子.场景2：当我们滚动窗口的时候，盒子是固定屏幕某个位置的。结论：要实现以上效果，标准流或浮动都无法快速实现所以：1.浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子。2.定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。静态定位是元素的默认定位方式，无定位的意思。

移动端css兼容问题

jiang_hyhappy的博客

07-21

896

1.安卓使用绝对定位布局与原生input有冲突如果绝对定位的元素在最下面，键盘弹起时，绝对定位元素会在键盘上面解决办法：使用flex布局实现，有一个flex-shrink可使用或者监听resize事件，将元素隐藏 export function adapterPosition(selector) { if (/iphone/i.test(navigator.userAgent...

Display. Absolute 父元素没有设置定位，根据啥定

06-10

### CSS Absolute Positioning Without Parent Position 在 CSS 中，当一个元素的定位属性设置为 `absolute` 时，它的位置将相对于最近的已定位祖先元素（即设置了 `position` 属性且值为 `relative`、`absolute` 或 `fixed` 的祖先元素）[^2]。如果不存在这样的祖先元素，则该绝对定位的元素会相对于初始包含块（通常是文档的根元素 `<html>`）进行定位。 #### 子元素使用 `absolute` 定位而父元素未设置定位的情况如果子元素设置了 `position: absolute`，但其父元素没有设置任何定位（即父元素的 `position` 属性值为默认的 `static`），那么该子元素的定位基准将是最近的具有非静态定位的祖先元素。如果没有这样的祖先元素存在，则子元素的定位基准将变为初始包含块，也就是视口或文档的根元素[^3]。以下是一个示例代码： ```css .parent { /* 父元素没有设置 position */ } .child { position: absolute; top: 10px; left: 10px; } ``` 在这种情况下，`.child` 元素的定位基准是文档的根元素 `<html>`，而不是 `.parent` 元素。 #### 示例解释当 `.child` 元素被设置为 `position: absolute` 时，浏览器会沿着 DOM 树向上查找最近的已定位祖先元素。如果找不到这样的祖先元素，则 `.child` 的定位基准将回退到初始包含块，即视口或 `<html>` 元素[^3]。 #### 如何解决此问题为了使 `.child` 元素相对于 `.parent` 元素进行定位，可以为 `.parent` 设置一个非静态定位属性，例如 `position: relative`： ```css .parent { position: relative; /* 触发定位上下文 */ } .child { position: absolute; top: 10px; left: 10px; } ``` 通过这种方式，`.child` 的定位基准将变为 `.parent` 元素。 ### 注意事项绝对定位的元素会被移出正常的文档流，这意味着它不会影响其他元素的布局，也不会被其他元素所影响。 ---