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日

相关文章

  • W3C教程(3):W3C HTML 活动

    以下是关于”W3C教程(3):W3C HTML 活动”的完整攻略。 标题 W3C教程(3):W3C HTML 活动 正文 W3C HTML 活动是指由W3C组织所举办的一系列HTML相关技术活动,旨在推动HTML技术的发展与应用。这些活动包括研讨会、研讨会、通讯、标准化工作以及其他活动。 研讨会 W3C HTML 活动中的研讨会旨在探讨HTML技术的进展和未…

    css 2023年6月10日
    00
  • HTML5+CSS3网页加载进度条的实现,下载进度条的代码实例

    嗨,欢迎来到本站!以下是关于HTML5+CSS3网页加载进度条的实现,下载进度条的代码实例的完整攻略: 前置知识 在实现网页加载进度条的过程中,需要一些基础知识。以下是一些你需要掌握的前置知识: HTML5:HTML5是HTML的第5个版本,是一种用于建立和呈现Web内容的标准技术。 CSS3:CSS3是CSS的第3个版本,是一种用于美化Web页面的标准技术…

    css 2023年6月11日
    00
  • JavaScript截屏功能的实现代码

    我来为您讲解“JavaScript截屏功能的实现代码”的完整攻略。 1. 基本思路 实现JavaScript截屏功能的基本思路是,使用HTML5新增的Canvas元素,将页面上需要截屏的部分绘制到Canvas上,然后将Canvas转换为图片格式保存。具体步骤如下: 创建Canvas元素和Context对象 绘制需要截屏的部分到Canvas上 将Canvas转…

    css 2023年6月10日
    00
  • 微信小程序CSS3动画下拉菜单效果

    下面我将详细讲解“微信小程序CSS3动画下拉菜单效果”的完整攻略。 一、准备工作 在实现小程序CSS3动画下拉菜单效果前,需要做好以下几点准备工作: 确认所需组件:需要一个顶部导航栏和一个下拉菜单; 确认所需框架:本次攻略基于WeUI框架开发实现,需要先引入 WeUI 框架; 准备所需样式:需要针对顶部导航栏和下拉菜单进行样式的设计。 二、实现步骤 1. 引…

    css 2023年6月11日
    00
  • 利用Three.js实现3D三棱锥立体特效

    实现3D三棱锥立体特效的完整攻略,可以分为以下三个步骤: 1. 准备工作 首先,需要在HTML文件中引入Three.js库文件,可以从官网上下载并引入到HTML文件中。 其次,需要在HTML文件的body中添加一个容器元素用来显示3D场景,例如: <body> <div id="container"></di…

    css 2023年6月10日
    00
  • css实现兼容火狐、IE的LI奇偶行颜色交替方法

    CSS实现兼容火狐、IE的LI奇偶行颜色交替方法 为了实现网页中列表的行颜色交替,通常需要使用CSS中的:odd和:even伪类,但是在不同的浏览器下(比如firefox和IE)这两个伪类的实现方式有所不同,因此需要针对不同的浏览器进行特别处理,以下是实现方法: 方法一:使用CSS选择器 li:nth-child(odd) { background-colo…

    css 2023年6月9日
    00
  • css固定table表头的实现代码可同时看到表头和表格底部

    要实现固定table表头,可以使用css的position属性将表头固定在页面上方,同时使表格内容可以滚动。这里提供两种实现方式: 使用表格布局 代码示例: <div class="table-wrapper"> <table> <thead> <tr> <th>姓名</t…

    css 2023年6月10日
    00
  • React实现组件全屏化的操作方法

    当我们需要在React应用程序中实现组件全屏化时,可以采用以下操作方法。 1. 使用CSS样式 可以通过CSS样式来控制组件的宽高,以达到全屏化的效果。比较简单的方法是使用绝对定位和设置宽高为100%。具体做法如下: .full-screen { position: absolute; top: 0; left: 0; right: 0; bottom: 0…

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