css position: absolute、relative详解

CSS Position: Absolute和Relative详解

在CSS中position属性用于定义元素的定位类型。在position属性中有四个值:static(默认)、relative、absolute 和 fixed。

本篇攻略将详细介绍position属性中的absolute和relative,帮助您更好地理解和应用这两个定位类型。

Relative相对定位

相对定位是相对于元素原来在文档流中的位置进行定位,与元素周围的其他元素位置不会发生影响。即位置变动不会对其他元素造成影响。

示例1:

<div class="container">
  <div class="box1">Hello, how are you?</div>
  <div class="box2">I'm fine, thank you.</div>
</div>
.container {
  width: 300px;
  height: 300px;
  border: 1px solid black;
}

.box1 {
  position: relative;
  top: 50px;
  left: 50px;
  background-color: gray;
  width: 200px;
  height: 100px;
}

.box2 {
  width: 100px;
  height: 100px;
  background-color: yellow;
}

上面代码中,我们通过position: relative;top: 50px;left: 50px;来将box1向下移动了50px,向右移动了50px,而box2没有发生位置变动。

示例2:

<div class="container">
  <div class="box1">Hello, how are you?</div>
  <div class="box2">I'm fine, thank you.</div>
</div>
.container {
  width: 300px;
  height: 300px;
  border: 1px solid black;
}

.box1 {
  position: relative;
  top: 50px;
  background-color: gray;
  width: 200px;
  height: 100px;
}

.box2 {
  position: relative;
  top: -50px;
  left: 100px;
  background-color: yellow;
  width: 100px;
  height: 100px;
}

上面代码中,我们通过position: relative;top: -50px;left: 100px;将box2向上移动了50px,向右移动了100px,而box1没有发生位置变动。

Absolute绝对定位

绝对定位是相对父元素(经过定位的元素)的位置进行定位。当父元素没有经过定位时,则相对于浏览器窗口定位。

示例1:

<div class="container">
  <div class="box1">Hello, how are you?</div>
  <div class="box2">I'm fine, thank you.</div>
</div>
.container {
  width: 300px;
  height: 300px;
  border: 1px solid black;
  position: relative;
}

.box1 {
  position: absolute;
  top: 50px;
  left: 50px;
  background-color: gray;
  width: 200px;
  height: 100px;
}

.box2 {
  width: 100px;
  height: 100px;
  background-color: yellow;
}

上面代码中,我们通过position: absolute;top: 50px;left: 50px;让box1相对于父元素(container)的顶部和左侧各向下、向右跨越50px的距离。而box2没有发生位置变动。

示例2:

<div class="container">
  <div class="box1">Hello, how are you?</div>
  <div class="box2">I'm fine, thank you.</div>
</div>
.container {
  width: 300px;
  height: 300px;
  border: 1px solid black;
  position: relative;
}

.box1 {
  position: absolute;
  top: 50px;
  background-color: gray;
  width: 200px;
  height: 100px;
}

.box2 {
  position: absolute;
  top: 30px;
  left: 100px;
  background-color: yellow;
  width: 100px;
  height: 100px;
}

上面代码中,我们通过position: absolute;top: 30px;left: 100px;让box2相对于父元素(container)的顶部向下跨越30px的距离,与之相邻的box1也随之向下移动。而box2还向右跨越100px的距离,因此其完全出现在box1的右边。

总结

通过上面的两组例子,我们可以看到相对定位仅仅是在元素的原有位置上进行移动(如上下左右移动),而绝对定位则是根据父元素的位置进行移动(如向下向右移动)。两者的使用场景不同,需要根据自己的需求进行选择。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:css position: absolute、relative详解 - Python技术站

(0)
上一篇 2023年6月9日
下一篇 2023年6月9日

相关文章

  • 跟我学XSL(一)第1/5页

    “跟我学XSL(一)第1/5页”是一篇介绍XSL(可扩展样式表语言)的文章,主要包括XSL的基本语法、模板匹配和选择器等。如果你想学习XSL,该文章可作为一个很好的起点。 下面我们来详细讲解一下该文章的完整攻略: 1. 理解XSL和XSLT XSL是一种可扩展样式表语言,通常用于对XML文档进行格式化和转换。XSLT是XSL的一个子语言,基于XML领域中的X…

    css 2023年6月9日
    00
  • 使用 electron 实现类似新版 QQ 的登录界面效果(阴影、背景动画、窗体3D翻转)

    使用 Electron 实现类似新版 QQ 的登录界面效果,需要注意以下几点: 1. 创建 Electron 项目 使用命令行创建一个新的 Electron 项目,进入项目文件夹后安装必要的依赖: # 初始化项目 npm init # 安装 electron npm install electron –save # 安装 jquery 和 bootstra…

    css 2023年6月11日
    00
  • HTML实现遮罩层的方法 HTML中如何使用遮罩层

    HTML实现遮罩层的方法: 遮罩层可以帮助弹窗、菜单等弹出层在页面中居中显示,并阻止用户在弹出层显示期间进行其他操作。常用的方法有以下几种: 使用CSS中的position属性和z-index属性 使用CSS中的position属性和z-index属性可以轻松实现遮罩层的效果。具体做法如下: /* 遮罩层样式 */ .mask { position: fix…

    css 2023年6月10日
    00
  • 高性能WEB开发 为什么要减少请求数,如何减少请求数!

    在高性能 WEB 开发中,减少请求数是提高网站性能的重要手段之一。本文将提供一些关于为什么要减少请求数以及如何减少请求数的完整攻略,包括使用 CSS Sprites 和合并 JavaScript 文件的示例说明。 为什么要减少请求数 减少请求数可以提高网站的性能,具体原因如下: 减少 HTTP 请求:每个 HTTP 请求都需要建立连接、发送请求、等待响应、关…

    css 2023年5月18日
    00
  • 一个属性border-collapse解决Table的边框问题

    当使用HTML中的table标签创建表格时,常常会遇到边框重叠的问题。一个属性border-collapse可以解决这个问题。 什么是border-collapse border-collapse是CSS中的一个属性,用于设置表格元素边框合并的方式。 默认情况下,HTML中的表格元素的边框会分离,即每个单元格都有自己的边框。如果两个单元格的边框相邻,它们会产…

    css 2023年6月10日
    00
  • javascript代码优化的8点总结

    让我们开始。 JavaScript代码优化的8点总结 1. 减少全局变量 全局变量的声明会增加作用域链的长度,导致代码执行速度变慢。为了减少全局变量的数量,可以将变量封装在函数闭包中,只在需要时访问。 示例: (function() { var myVariable = ‘hello’; function myFunction() { var myInner…

    css 2023年6月10日
    00
  • jQuery ui实现动感的圆角渐变网站导航菜单效果代码

    为了实现jQuery UI实现动感的圆角渐变网站导航菜单效果,需要按照以下步骤操作: 步骤一:准备工作 首先,需要确保正确安装jQuery和jQuery UI库文件,并在HTML文件中使用以下代码调用它们: <link rel="stylesheet" href="https://code.jquery.com/ui/1.…

    css 2023年6月10日
    00
  • Html5新增标签与样式及让元素水平垂直居中

    HTML5新增标签 HTML5新增了许多标签,以便更好地组织页面结构。下面介绍一些常用的HTML5新增标签: <header> 标签:表示一个文档或者一个区域的头部。 <nav> 标签:表示导航链接的一组集合。 <section> 标签:表示一个文档或者一个应用中一个独立的区域。 示例代码: <header> …

    css 2023年6月11日
    00
合作推广
合作推广
分享本页
返回顶部