html 图片position,【图解CSS#Position】

关于CSS position,来自MDN的描述:

CSS position属性用于指定一个元素在文档中的定位方式。top、right、bottom、left 属性则决定了该元素的最终位置。

先看一个图片:

22f35be72f2a

child没设置position的样式

代码如下:

child1-1
child1-2
child1-3
child1-4

.parent1{

background-color: chocolate;

width: 300px;

height: 300px;

margin: 25px 50px 75px;

}

.child1-1{

background-color: cornflowerblue;

width: 60px;

height: 60px;

}

.child1-2{

background-color:crimson;

width: 60px;

height: 60px;

}

.child1-3{

background-color:darkcyan;

width: 60px;

height: 60px;

}

.child1-4{

background-color: darkgreen;

width: 60px;

height: 60px;

}

这里展示的就是一个正常“文档流”,

Normal flow

Boxes in the normal flow belong to a formatting context, which may be block or inline, but not both simultaneously. Block-level boxes participate in a block formatting context. Inline-level boxes participate in an inline formatting context.

个人理解:顾名思义就是像写文档一样,一行一行的排列,如图,每个child 都是一个60*60 的小方块,即使在他们右边有多余的位置,但是它们还是占一行。position就是每个元素的定位属性,而默认就是 position = static,即上图中parent 和 child 都是展示的文档流样式。

而position属性一共有以下取值:

static

默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)

relative

生成相对定位的元素,相对于其正常位置进行定位。 如我们将上面的代码改成

// ...

.child1-2{

background-color:crimson;

width: 60px;

height: 60px;

position: relative;

left: 20px;

top: 30px;

}

22f35be72f2a

relative

可以看到 child1-2 在原来的位置上,左边多出了 20px ,距离顶部多出了 30px

absolute

生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。

我们将上例的child1-2恢复,然后操作child1-3

.child1-3{

background-color:darkcyan;

width: 60px;

height: 60px;

position: absolute;

left: 20px;

top: 30px;

}

22f35be72f2a

absolute

可以看到,child1-3 的位置已经和 parent 无关了(因为 parent 的 position = "static"),很多时候,都会将 parent 设置成relative 来和 absolute child 配合使用。

我们再改一下 child1-3 的代码

.child1-3{

background-color:darkcyan;

width: 60px;

height: 60px;

position: absolute;

left: 20px;

bottom: 30px; // 注意这个

}

22f35be72f2a

bottom 30px

22f35be72f2a

bottom 30px 增加浏览器的高度

可以看到,child1-3 其实是一直跟着浏览器的高度在变化的。

fixed

.child1-4{

background-color: darkgreen;

width: 60px;

height: 60px;

position: fixed;

bottom: 30px;

left: 70px;

}

22f35be72f2a

fixed

而且,当浏览器高度变化时,他们两个也会跟着变化。

但是,两者的区别就在于,当 parent 设置成 position = relative 时,

.parent1{

background-color: chocolate;

width: 300px;

height: 300px;

margin: 25px 50px 75px;

position: relative;

}

22f35be72f2a

parent position = relative

即此时,child1-3 的 left,right 等以 parent 为基准。

inherit

规定应该从父元素继承 position 属性的值。

这个就不需要图解了。。。。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/552276.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

佳能g3800故障灯说明书_佳能打印机故障如何维修 佳能打印机故障维修方法【介绍】...

在现代办公中是离不开打印机的,一些办公文件都是需要用它来打印的,也因此在办公中的地位是很重要的。也正因此它要是出现了故障,会给我们带来很大的麻烦,很是影响工作进度。佳能是很知名的,即使是这样,它在…

ll微信2下载安装_【兰苑文学】:陈振 ll黄金槐

作者简介陈振,新余市作协会员,江西省优秀乡村教师,中国网络诗歌学会会员。作品见于《诗选刊》《诗歌月刊》《诗潮》《鸭绿江》《诗人》《作家报》《长江诗歌》《海口日报》印尼《千岛日报》和《2018江西诗歌年选》《中国民间短诗精选》《中国…

无法扩展该卷 因为群集的数量将超过文件系统_浏览器将支持Python项目!Mozilla发布Pyodide...

作者|Michael Droettboom 编译|王强、覃云 近日,Mozilla 发布了一个实验项目 Pyodide,旨在浏览器内运行一个完整的 Python 数据科学堆栈。链接:https://github.com/iodide-project/pyodide/Pyodide 的创意起源于 Mozil…

华锋e路航x10升级工具_万商云集:疫情下火爆的电子合同,背后是企业数字化升级的必然...

近年来,数字经济快速发展成为中国经济发展的新动能,作为企业数字化转型中非常重要的一环,电子合同也随着产业数字化程度的加深快速渗透到各行各业,万商云集早在去年年底就已经正式拥抱电子合同,助力客户实现数字化升级…

edge播放视频HTML5黑屏,Win10 edge浏览器播放视频黑屏解决方法

Edge看不了视频怎么办呢? 出现这样的问题是由于Edge浏览器中需要点击允许才能看视频,但如果不弹出提示窗口我们就无法正常观看视频,所以当我们遇到这样的情况可以按下面方法进行操作!Edge看不了视频解决步骤:1、按下winR 组合键打开运行&…

@async 如何返回list_图解 Await 和 Async

原文链接:Await and Async Explained with Diagrams and Examples文章目录简介Promise问题:组合 PromiseAsync 函数Await错误处理讨论简介JavaScript ES7中的 async/await 使得协调异步 promise 变得更容易。如果你需要从多个数据库或 API 异步获取数据&…

求一个向量变换为另一个向量的矩阵_OpenGL里旋转等变换矩阵为什么是4x4的矩阵...

OpenGL ES 的很多教程里都会有这样一个例子来讲解纹理:将一张图片作为纹理显示在屏幕上。因为纹理坐标和实际屏幕显示的坐标不一样,把图片渲染在屏幕上后,图片是上下颠倒的。一个解决方法是对当前的顶点坐标,乘以绕 z 轴旋转180度…

白鹭时代与html5关系,白鹭时代观点:HTML5行业将进入红利收割期

2016年,H5产业风风火火,各种引人注目。最大成果无疑是游戏《传奇世界H5》月流水破了3000万,引起整个行业巨大震动,同时,也标志着H5重度游戏时代来临。国内最大的HTML5移动技术与服务供应商白鹭时代认为,201…

boot定时任务开启和关闭 spring_Spring之定时任务实践

Java下的定时任务实现有Timer,Spring,QuartZ等,这里我们介绍Spring中定时任务的应用,其通过 Scheduled 注解即可轻松实现概述Spring 的定时任务可以支持各种形式的定时调度任务。其通过加在定时方法上的 Scheduled 注解来配置任务…

计算机怎么取消用户密码,怎么取消开机密码:计算机开机进入Windows时的开机密码怎么取消?...

优质回答 回答者:168长腿欧巴在电脑中的“用户账户”界面即可设置取消开机密码,具体操作请参照以下步骤。1、右键Win10系统的开始菜单,选择弹出菜单里的“运行”选项。2、然后在出现的运行对话框里输入命令“netplwiz”,点击确定。…

echarts symbol 回调函数_【OpenLayer 实战】实现仿Echarts风格的动态迁徙图/航班图

使用的数据还是来自echarts,模拟了全国各地到湖南重点景区的客流情况。分析要实现动态迁徙图的效果,主要需解决两个问题 曲线的绘制。因为给出的数据只有起点和终点两个点位,所以想要绘制曲线可以参考turf中的bezier曲线生成API。 点迹…

校运会计算机科学系大本营,计算机系团总支学生会学期总结大会

(本网讯)时光飞逝,又一个学期即将就此画上了圆满的句号。为推动我系团总支学生会工作更长久的发展,提高学生会干部工作的热情和质量,2016年12月8日晚上19:00在第一教学楼C102课室里,校学生会全体成员齐聚一堂,参加了20…

hexo评论_【前端简历加分】hexo框架搭建个人博客站点,手把手教学

最近,粉丝们在金九银十期间也是不断的面试,有比较多的毕业生说我在这个期间出多一些面试题,上几期都是倾向于面试文章,这期出一次简历加分项操作,使用hexo框架搭建个人博客。作为应届毕业生或者1-3年工作经验的程序员拥…

电脑抓整个路由器的包_网络是电竞游戏体验的命脉 2018年年度电竞路由器功能盘点...

2018年是电竞路由器的元年,从2017年的概念产品诞生开始,电竞路由器很快就确定了品类,随着《绝地求生》、《王者荣耀》等对网络质量敏感的竞技游戏的火爆,电竞路由器迅速被竞技玩家熟知,并在2018年以野火燎原的速度发展…

dos 改某个目录下所有文件的时间_go语言入门学习笔记(2)-DOS操作及go语言变量学习...

API:application program interface:应用程序编程接口。就是我们go的各个包的各个函数。我们想要了解这些函数我们可以通过Go的中文网在线标准库文档:https://studygolang.com/pkgdocDOS介绍:Dos:Disk Operating System 磁盘操作系…

es multi match_PHP 的ES搜索操作

原文:https://blog.csdn.net/JineD/article/details/106650695首先从ES的支持的字段说起,ES文档中字段有多种类型 官方文档。这几个比较常用:text,keyword,integer,float,boolean,object,geo_point(地理坐标),geo_shape(描述地理区域),date.注…

git 怎么还原历史版本_4. Git--修改/回退等操作

》》点赞,收藏关注,理财&技术不迷路《《我们已经成功地添加并提交了一个readme.txt文件,现在,是时候继续工作了,于是,我们继续修改readme.txt文件,改成如下内容:Git is a distri…

为什么用python写爬虫_零基础,是怎么开始写Python爬虫的

刚开始接触爬虫的时候,简直惊为天人,十几行代码,就可以将无数网页的信息全部获取下来,自动选取网页元素,自动整理成结构化的文件。利用这些数据,可以做很多领域的分析、市场调研,获得很多有价值…

datatable怎么根据两列分组_谈谈怎么做服务隔离

来源于公众号孤独烟 ,作者孤独烟引言OK,如下图所示那显而易见,做服务隔离的目的就是避免服务之间相互影响。毕竟谁也不能说自己的微服务百分百可用,如果不做隔离,一旦一个服务出现了问题,整个系统的稳定性都…

position: absolute;_前端性能优化--transform与position

上个星期去yy语音面试&#xff0c;就有一个这样问题&#xff1a; transform与position:absolute 有什么区别? 我回家后查资料发现这道题目其实不简单啊&#xff0c;涉及到重排、重绘、硬件加速等网页优化的知识。首先看一个用top、left实现的动画效果<style>html,body {…