Position的几种值：static，absolute，fix，relative - Zam's Notebook - ITeye博客

`

luzl

浏览: 571595 次
性别:
来自: 大连

最近访客更多访客>>

djhk168

bingel

yyddbull

yangkr

博主相关

博客

微博

相册

收藏

留言

关于我

文章分类

社区版块

存档分类

最新评论

sucheng2016：最近也遇到同樣的問題，我用的是com.fasterxml.j ...
Java的Timezone问题
netwelfare：这里有篇《时间纪元与时区介绍》，讲解的不错，可以看看。
Java的Timezone问题
yjplxq： ...
Java -jar 选项与 -cp/-classpath
phil09s：问题是，为什么要设定成这样？
Java局部变量必须初始化
anttu： ...
db2 SQL: value(), values(), with, recursive SQL

Position的几种值：static，absolute，fix，relative

博客分类：

CSS

阅读更多

为了验证这几种的作用我写了以下代码：

<html >
<head>
<meta http-equiv="content-type" content="text/html" charset="gb2312">
<style> *{margin:0;padding:0} </style> 
</head> 
<body> 
	<div style="position:absolute;height:400px;width:400px;background:yellow;left:80px;top:80px;">
		<div style="position:absolute;height:200px;width:200px;background:red;left:100px;top:80px;"></div>
		<div style="position:relative;height:200px;width:200px;background:blue;left:186px;top:186px;"></div>
		<div style="position:fixed;height:140px;width:140px;background:black;left:20px;top:20px;"></div>
	</div>
	<div style="position:static;height:140px;width:140px;background:brown;left:220px;top:220px;"></div>
</body> 
</html>

效果图如下：

紫色(brown)的是static的，所以它的left和top没有起作用，一直跑到最上面去了
黑色（black）的是fixed的，所以它直接以浏览器窗口开始计算left和top的值
红色(red)和蓝色(blue)分别是absolute和relative他们都是从父对象开始计算left和top的值，只是因为有一个是absolute所以产生了重叠效果，没有被另外一个挤走。
同时我也明白了另外一个道理，因为默认的类型都是static，所以当我们的页面长度等定位的不合理时一个会把一个挤走。

查看图片附件

分享到：

Unix Shell 的 While 循环 | 非常详细的/etc/passwd解释

2010-01-10 11:04
浏览 13258
评论(0)
论坛回复 / 浏览 (0 / 3412)
分类:Web前端
查看更多

评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

CSS中的position 的值： absolute 与 relative: 在CSS（层叠样式表）中，`position`属性...总结起来，`position: relative`和`absolute`在CSS布局中各有其独特的功能和用途。理解并熟练运用它们，能帮助开发者更好地控制网页元素的布局，实现更复杂、精细的设计效果。

关于position、absolute、relative层叠加的技巧: Position 属性有五个值：static、relative、absolute、fixed 和 inherit。其中，static 是默认值，relative、absolute 和 fixed 是动态定位的三种方式。静态定位（Static Positioning） -------------------------...

css position: absolute、relative详解: CSS中的position属性是用于控制HTML元素的定位类型，它有两个特别重要的值：absolute和relative。这两个值控制元素是否脱离正常的文档流，以及如何通过特定的属性来精确定位元素。下面是关于这两个定位属性的详细...

关于CSS position属性值absolute,relative的解释.zip: 首先，我们来了解`position: relative;`。这个值表示元素是相对定位的。当一个元素的`position`被设置为`relative`时，它会保持其在正常文档流中的位置，然后可以通过`top`、`bottom`、`left`和`right`属性来偏移其...

css的position里的relative和absolute的区别.docx: 在 position 属性中，有五个值：static、inherit、fixed、absolute 和 relative。今天，我们将深入探讨 relative 和 absolute 两个值的区别。首先，让我们来看看 W3C 对 absolute 和 relative 的定义： absolute...

position的relative和absolute总结: 总之，掌握`position: relative`和`absolute`对于成为熟练的前端开发者是必不可少的。它们提供了对元素布局的精细控制，使得我们可以创造出丰富多样的网页设计效果。不断练习和探索这些属性，你将在网页布局的世界里...

li标签的position:absolute与relative案例应用: 今天在写一个购物车里面选择发货地址的部分时，多个收货地址用到了UL标签，由于每个地址的后面有个“修改地址”的功能，而且位于li标签的右边，于是就用到了，position：absolute； right：10px；这样把“修改地址”...

position:relative/absolute无法冲破的等级: 我们想要将`<span>`元素放置在其所在`<li>`元素之上，因此给`<li>`设置了`position:relative`，给`<span>`设置了`position:absolute`。预期效果是`<span>`覆盖在其父级`<li>`之上，但实际情况是无论如何调整`z-index...

css中position:relative和overflow:hidden之间的问题: `position`属性用于定义元素的定位模式，它有多种值，如`static`（默认值）、`relative`、`absolute`、`fixed`和`sticky`。当`position`设置为`relative`时，元素保持其正常流中的位置，但可以通过`top`和`left`等...

CSS中的position:relative;的作用示例介绍: 3. **absolute**：设置`position:absolute;`会使元素脱离文档流，根据最近的非`static`定位的祖先元素进行定位。如果找不到这样的祖先，那么它会相对于`body`定位。使用`left`, `right`, `top`, `bottom`可以精确...

css中position:relative和overflow:hidden的问题: 然而，需要注意的是，`position:relative`可能会改变元素的大小计算方式，尤其是在与`absolute`或`fixed`定位的子元素一起使用时。如果父元素设置了`position:relative`，并且有绝对定位的子元素，那么子元素的定位...

使用CSS的position属性控制页面布局的入门教程: position: absoluteposition: relativeposition: fixedposition: staticposition: inherit本文主要详细讨论 position 属性的前三个值，首先大概讲解下后两个值： static static 为 position 属性的默认值，static ...

HTML基础知识——css样式表,样式属性,格式与布局详解: 外层没有position：absolute（或relative）；那么div相对于浏览器定位，如下图中b（距离浏览器右边框为50像素，距离下边框为20像素）。 2.外层有position：absolute（或relative）；那么div相对于外层边框定位，如...

CSS教程——元素定位: 使用 position: relative + position: absolute 可以实现两列布局。例如： ```html <div id="div-1a">this is column-one <div id="div-1b">this is column-two ``` ```css #div-1 { position: relative; } #...

css中定位中的absolute和relative是什么意思: Position属性有四个值：static、fixed、absolute和relative，后面两个在布局中的定位里是经常用到的，顾名思义， absolute是指绝对定位，即将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对...

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

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

详解css position 5种不同的值的用法: position属性 position属性指定用于...position:static; 默认情况下，HTML元素定位为静态。静态定位元素不受top，bottom，left和right属性的影响。元素position:static;没有以任何特殊方式定位; 它总是根据页面的正

Global site tag (gtag.js) - Google Analytics