您现在的位置是:首页 > 正文

相对(relative)定位和绝对(absolute)定位

2024-02-01 05:32:28阅读 2

首先,position的这两个属性一般是不使用的,因为有了浮动,所以我们才需要position属性来实现我们想要的布局。

1.相对定位(relative):相对于原来位置(原来位置指在文档流中默认的位置,若加上了浮动时,那么这个原来位置就是你设定浮动时的位置)的偏移,原来位置依然占据空间。

(1)box1和box2都没有设置position属性(没有设置float属性时

效果图:我们可以看出box盒子设置的left(包括top,right,bottom等)属性根本没起到任何作用

(2)给box2加上position:relative,效果如图:这时候box2相对于原来的位置分别向右和下偏移了100px

(3)有float属性时:

(4)效果图:

(5)给box2加上position:relative后:相对于原来的位置偏移

(6)给两个标签都加上position:relative时:两个盒子都只相对于自己原来的位置偏移

2.绝对定位(absolute):指子元素在父元素里面相对于父级元素的定位,设置绝对定位的元素,它会浮起来,不会占据文档流空间(相对定位会占据空间)。

(1)给box1添加position:relative属性,给box02添加position:absolute属性

效果如图:box02的父级元素box2没有position属性,它就继续向上一级寻找,找到box1然后以box1为参照点移动。可以看到box02定位到了右下角,box03占据了box02 原有的位置(即absolute属性会删除原来位置占据的文档流空间),

(2)给box2设置position:absolute属性时,我们看到box02的位置是以box2位参照物来移动的。

(3)同样,我们给box03也加上position:absolute属性,此时box03的参照物也是box2

以上就是我对相对定位和绝对定位的了解,若有不足之处,还请指正。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

网站文章

  • 威胁驱动的网络安全方法论

    威胁驱动的网络安全方法论

    本文主要内容取自洛克希德·马丁公司的论文:A Threat-Driven Approach to Cyber Security,想要全面准确了解论文内容的朋友建议阅读原文。希望能够抛砖引玉,为相关领域...

    2024-02-01 05:32:20
  • 解决eclipse集成maven插件 add dependencies搜索不到jar包的问题

    解决eclipse集成maven插件 add dependencies搜索不到jar包的问题

    背景: 新建了maven项目,要添加jar包,但有不想去网上一个一个搜索再写到pom.xml里 所以想在add dependencies中搜索添加,奈何搜索出来只有本地的那几个jar包(默认) 尝试: 去百度查了很多解决方法... 如:1、配置阿里的远程仓库,但...又报错-找不到xxx.zip文件~ 2、设置eclipse的属性啊...没有效果 3、删除...

    2024-02-01 05:32:13
  • 十年程序人生路,他是如何从某度外包逆袭成为阿里架构师的?

    十年程序人生路,他是如何从某度外包逆袭成为阿里架构师的?

    写在前面 我的一位朋友在某大型互联网公司担任架构师。刚毕业那年,他以外包的身份进入了某度,那个时候他几乎每一天都很焦虑,大家技术能力没差太多,为什么“我”是外包身份? 后来辞职,去了一家 20 人左右...

    2024-02-01 05:31:43
  • 分析国内独立开发者的现状,他们是如何生存的

    百度2013年第三季度《移动互联网发展趋势报告》报告显示: 今年第三季度,国内Android日活跃用户达到2.7亿,用户每天人均使用时长突破150分钟; 生活娱乐工具、视频、浏览器等高频或入口级应用受到用户青睐。

    2024-02-01 05:31:36
  • 【ELK系列二】es的UI界面elasticsearch-head插件安装

    【ELK系列二】es的UI界面elasticsearch-head插件安装

    安装elasticsearch-head插件由于es服务启动之后,访问界面比较丑陋,为了更好的查看索引库当中的信息,我们可以通过安装elasticsearch-head这个插件来实现,这个插件可以更方...

    2024-02-01 05:31:29
  • java 捕捉的异常抛出_Java异常抛出和捕获

    java 捕捉的异常抛出_Java异常抛出和捕获

    Java中把非正常情况分为两种,异常(Exception)和错误(Error)。异常.pngError:一般是指与虚拟机相关的问题(虚拟机错误、线程死锁等),这种错误无法回复或不可能捕获Excepti...

    2024-02-01 05:31:00
  • vue-cli中webpack配置之webpack.dev.conf.js

    vue-cli中webpack配置之webpack.dev.conf.js

    配置内容var utils = require('./utils')var webpack = require('webpack')var config = require('../config')v...

    2024-02-01 05:30:53
  • 1. VMware搭建Linux环境,安装配置centos6.5

    1. VMware搭建Linux环境,安装配置centos6.5

    1. 安装VMware,后新建虚拟机2.为我们的虚拟机挂载操作系统3、开启我们的虚拟机,为我们的虚拟机进行安装操作系统4、配置虚拟机连接网络修改linux的mac地址修改mac地址配置文件需要启动我们的linux的虚拟机,然后更改mac地址的配置文件vim /etc/u...

    2024-02-01 05:30:46
  • Hats’Worlds(字典树)

    Hats’WorldProblem Description: A hat’s word is a word in the dictionary that is the concatenation of exactly two other words in the dictionary. You are to find all the hat’s words in a dictionary. I

    2024-02-01 05:30:16
  • Centos 7.6安装Docker

    Centos 7.6安装Docker

    我是在腾讯云轻量服务器上安装的,参考的是docker的官网的教程,链接:Install Docker Engine on CentOS | Docker DocumentationInstructio...

    2024-02-01 05:30:08