`
tianjun309
  • 浏览: 368256 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

position的relative , absolute 关系

CSSXHTMLHTMLXML 
阅读更多 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" > 
<head><title>Absolute</title>
 <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
 <link rel="stylesheet" href="site.css"   media="all"    type="text/css" />
 <link rel="stylesheet" href="page.css"   media="all"    type="text/css" />
</head>

<body>


 <div class="positioned">
  <span class="absolute">Sized Absolute</span>
 </div>
 
</body>
</html>

 

CSS:

 

/*
 * 如果指定了一个position为relative,则后面定义出来的absolute会相对定位于它
 */
.positioned {
    position: relative;
}
.absolute {
    position: absolute;
    top: 10px;
    left: 10px;
}

 

(2)如果是absolute里面继续来absolute，则是相对自己上层的absoulte再次相对定位。

 

分享到：
| CSS 背景图片设置
评论
发表评论

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

相关推荐

    关于position、absolute、relative层叠加的技巧

    关于 position、absolute、relative 层叠加的技巧 Position 属性是 CSS 中的一种布局方式，用于控制元素在文档中的位置。Position 属性有五个值：static、relative、absolute、fixed 和 inherit。其中，static 是...

    position的relative和absolute总结

    本文将详尽地探讨`position`属性中的`relative`和`absolute`值，以及它们在网页设计中的应用。 首先，`position`属性的默认值是`static`，这意味着元素遵循正常的文档流，即按顺序从上到下、从左到右排列。但当我们...

    CSS中的position 的值： absolute 与 relative

    `position`属性有多个可选值，其中`absolute`和`relative`是两个最常使用的值，它们在网页设计中扮演着关键角色。 **一、position: static** 这是所有元素的默认定位方式。`static`定位遵循正常的文档流，即元素会...

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

    这是因为当两个元素的`position`都为`relative`或`absolute`时，它们之间的层级关系主要由它们在文档中的先后顺序决定，而不是由`z-index`值决定。具体来说，对于同级元素而言，后来者会覆盖前者。 #### 解决方案 ...

    css position: absolute、relative详解

    总结来说，position: absolute和position: relative是CSS中用于控制元素定位的两个重要属性。absolute让元素完全脱离文档流并相对于最近的已定位祖先元素（或者初始包含块）进行定位，而relative则让元素保持在文档...

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

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

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

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

    li标签的position:absolute与relative案例应用

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

    关于CSS position属性值absolute,relative的解释.zip

    本文件主要探讨了`position`属性的两个关键值：`relative`和`absolute`，这些知识点对于创建复杂的网页布局至关重要。 首先，我们来了解`position: relative;`。这个值表示元素是相对定位的。当一个元素的`position...

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

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

    CSS中的position:relative;的作用示例介绍

    在你的问题中，你特别关注了`position:relative;`的作用，这是一个基础且实用的定位方式。下面我会详细解释`position:relative;`以及与之相关的其他定位方式。 首先，我们来看`position`属性的四种主要值： 1. **...

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

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

    Position属性之relative用法

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

    css position属性为absolute时其百分值的计算

    - 当`position`为`absolute`时，包含块是最近的祖先元素，其`position`属性值不是`static`（即`fixed`、`absolute`、`relative`或`sticky`）的内边距区域的边缘（`padding-left` + `content` + `padding-right`）。...

    css中定位中的absolute和relative是什么意思

    `position`有四个可能的值：`static`、`fixed`、`absolute`和`relative`，其中`absolute`和`relative`是最常用的两种。 1. `relative`（相对定位）： - 当`position`设置为`relative`时，元素仍然遵循正常的文档流...

    HTML的relative与absolute使用及区别详解

    HTML的relative与absolute区别：说实话html这门语言算的上是这个世界上最简单的一门语言了，标签语言嘛，就是标签多了点英文单词超多，不过都是有规律的比如文本类居中text-align:center;加粗text-weight:bold;.但是...

Magicbox
Global site tag (gtag.js) - Google Analytics