html中相对定位怎么写,css相对定位「建议收藏」

html中相对定位怎么写,css相对定位「建议收藏」定位的四种模式:static,relative,absolute,fixed定位的四个位置:left,right,top,bottom定位属性:position,有四种状态值1.static:静态定位,按元素在文档流中的顺序排列,这是默认值,四个位置无效2.relative:相对定位,元素相对于原来它在文档流中的位置进行定位,四个位置有效3.absolute:绝对定位,元素相对于它的定位父级定位,…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46,售后保障稳定

5268f80b9b1e01f982625ef6fac83ca1.png

定位的四种模式:static,relative,absolute,fixed

定位的四个位置:left,right,top,bottom

定位属性:position,有四种状态值

1.static:静态定位,按元素在文档流中的顺序排列,这是默认值,四个位置无效

2.relative:相对定位,元素相对于原来它在文档流中的位置进行定位,四个位置有效

3.absolute:绝对定位,元素相对于它的定位父级定位,脱离文档流,四个位置有效

4.fixed:固定定位,与绝对定位类类似,也脱离了文档流,元素在页面上的位置固定,不随页面滚动,四个位置有效

1.相对定位

.box1 {

width:200px;

height: 200px;

background-color: lightskyblue;

position: relative;

top:0;

left:200px;

}

.box2 {

width:200px;

height: 200px;

background-color: lightgreen;

/*position: static;*/

}

.box3 {

width:200px;

height: 200px;

background-color: lightcoral; /*珊瑚色*/

/*position: static;*/

/*相对定位:十字架,这个色块距顶为-200px,距左为400px*/

position:relative;

top: -200px;

left: 400px;

}

.box4 {

width:200px;

height: 200px;

background-color: brown;

/*position: static;*/

/*相对定位:十字架,这个色块距顶为-200px,距左为400px*/

position:relative;

top: -200px;

left: 200px;

}

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/209937.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • TerminateProcess函数简单使用示例[通俗易懂]

    TerminateProcess顾名思义,就是终止进程的意思。是WindowsAPI的函数,示例代码如下://Demo.cpp:定义控制台应用程序的入口点。//终止进程Demo#include”stdafx.h”usingnamespacestd;//@param:dwpid:指定需要关闭的进程pidintCloseProcess(DWORDdwpi…

    2022年4月7日
    118
  • 知识图谱—知识推理综述(三)

    知识图谱—知识推理综述(三)知识图谱—知识推理综述(三)接上一篇文章知识图谱—知识推理综述(二)3基于表示的知识推理3.1方法简述在之前所介绍的知识推理中,都显示的定义了知识推理所需要的规则,条件等等离散符号。而在基于表示的知识推理中,我们第一步是将知识图谱中的节点和关系进行连续向量空间的映射,需要将其物理表示映射为数值表示,然后在利用数学中的相关算法,通过数值计算的方式进行知识推理。对于映射的向量空间而言,其可以是一个或者多个的向量或者矩阵。基于表示的推理的核心在于“如何表示”,在表示学习的过程中,我们需要的是让算法自

    2022年5月12日
    42
  • java是什么?java能用来干嘛?[通俗易懂]

    java是什么?java能用来干嘛?[通俗易懂]java是什么?java能用来干嘛?Java是一种开发语言(核心特点:跨平台,面向对象,名称由来看这里:J2EE里面的2是什么意思),对于开发者来讲,Java基本等于Jdk。Java由四方面组成:Java编程语言,即语法。Java文件格式,即各种文件夹、文件的后缀。Java文件格式,即各种文件夹、文件的后缀。Java虚拟机(JVM),即处理*.class文件的解释器。Java应…

    2022年7月7日
    23
  • 接口测试工具Postman接口测试图文教程

    接口测试工具Postman接口测试图文教程市场上有很多优秀的,完善的接口测试工具,比如SoapUI,Postman等,能够高效的帮助后端开发人员独立进行接口测试。这里使用Postman接口测试工具,此处以请求方式为POST的userLogin登录接口为例。

    2022年5月31日
    57
  • 解析PHP的self关键字

    解析PHP的self关键字

    2022年2月8日
    45
  • Kettle工具使用及总结

    Kettle工具使用及总结Kettle工具使用及总结,kettle主要用于数据清洗,即常见ETL工具,拥有图形化界面且免费的优点。其下载包直接解压打开就能用,遇到的问题:1.连接MySQL报错:①报错:Driverclass’org.gjt.mm.mysql.Driver’couldnotbefound,makesurethe’MySQL’driver(jarfile)isinstalled.org.gjt.mm.mysql.Driver原因:没有识别

    2022年10月17日
    3

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号