CSS设置DIV的绝对定位和相对定位
首先不给div设置定位,看看他们在网页中的位置
- 代码如下
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>CSS中div定位</title><style type="text/css">.div1{height: 100px;width: 100px;border: 10px solid red;background-color: yellow;}.div2{height: 100px;width: 100px;border: 10px solid blue;background-color: yellow;}</style></head><body><div class="div1"></div><div class="div2"></div></body>
</html>
如下图所示,可以看到两个div在没使用定位的情况下显示的位置,我们可以知道div是个块元素,自动换行了
相对定位:首先给div2使用
- 代码如下
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>CSS中div定位</title><style type="text/css">.div1{height: 100px;width: 100px;border: 10px solid red;background-color: yellow;}.div2{height: 100px;width: 100px;border: 10px solid blue;background-color: yellow;position: relative;top: 40px;left: 40px;}</style></head><body><div class="div1"></div><div class="div2"></div></body>
</html>
如下图所示,div2的位置分别偏移了左边和上边40个像素
绝对定位:现在给div2加绝对定位
- 代码如下:
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>CSS中div定位</title><style type="text/css">.div1{height: 100px;width: 100px;border: 10px solid red;background-color: yellow;}.div2{height: 100px;width: 100px;border: 10px solid blue;background-color: yellow;position: absolute;top: 40px;left: 40px;}</style></head><body><div class="div1"></div><div class="div2"></div></body>
</html>
如下图所示
绝对定位:现在给div绝对定位上边60px,左边60px,看执行结果
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>CSS中div定位</title><style type="text/css">.div1{height: 100px;width: 100px;border: 10px solid red;background-color: yellow;position: absolute;top: 60px;left: 60px;}.div2{height: 100px;width: 100px;border: 10px solid blue;background-color: yellow;position: absolute;top: 40px;left: 40px;}</style></head><body><div class="div1"></div><div class="div2"></div></body>
</html>
结果如下图所示,得出结论,绝对定位的定位点是父div左上角坐标(0,0),但是由于父div默认都会有内外边距,所以看起来会有点差距。
CSS设置DIV的绝对定位和相对定位相关推荐
- css设置div上下左右均居中 、底部居中
css设置div或盒子居中 #垂直居中 #左右居中 #底部居中 类型一:固定宽度高度 html代码 <div class="login_container"><d ...
- css设置div不可编辑,css 怎么设置div不可点击
css设置div不可点击的方法:1.通过"event.preventDefault()"方法取消事件的默认动作:2.通过"event.stopPropagation()& ...
- html内容超出不自动滚动,css设置div滚动条内容不超过就不显示
css设置div滚动条内容不超过就不显示 实现内容不超出就不显示滚动条的效果,可以设置div的css样式为overflow:auto,当overflow取值为auto时,如果内容被修剪,则浏览器会显示 ...
- html代码字号div style=,div字体大小设置 css设置div中字体大小尺寸样式
div字体大小设置 css设置div中字体大小尺寸样式设置篇 在css div布局中常常对div字体大小设置,这篇ThinkCSS为大家介绍div中字体大小尺寸样式设置,通过直接在div标签加字体大小 ...
- 在HTML中让边框变透明,如何用CSS设置DIV边框透明
如何实现用CSS设置DIV边框为透明呢?我们来看一看. 工具/材料 电脑 操作方法 01 透明一般认为是一种颜色属性,但是并没有这个数值.我们找到了一种让div实现透明的最佳方案,运用RGBA 02 ...
- HTML如何修改span里面的字体颜色,怎么用span css设置div内部分字体颜色?
本篇文章给大家带来的内容是关于怎么用span css设置div内部分字体颜色,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 用span标签设置div内放一段文字中的部分文字字体颜色方 ...
- html圆点边框颜色,css设置div边框颜色
div边框色调 css设置装备摆设div边框色采 使用css对div边框设置色采是思空见贯CSS花式设置装备摆设.对div边框颜色设置说需要css单词为border. 去领会干系教程:<CSS边 ...
- html代码设置span字体颜色,怎么用span css设置div内部分字体颜色?
本篇文章给大家带来的内容是关于怎么用span css设置div内部分字体颜色,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 用span标签设置div内放一段文字中的部分文字字体颜色方 ...
- div怎么在css中设置字体大小,div字体大小设置 css设置div中字体大小尺寸样式
div字体大小设置 css设置div中字体大小尺寸样式设置篇 在css div布局中常常对div字体大小设置,这篇ThinkCSS为大家介绍div中字体大小尺寸样式设置,通过直接在div标签加字体大小 ...
最新文章
- 2021年大数据Flink(三十三):​​​​​​​Table与SQL相关概念
- Scala花括号和圆括号的区别
- 第一个hibernate程序HelloWorldHibernate
- oracle 修改索引的名称,Oracle中查询索引名称,批量修改索引名称语句
- 计算机编程英语用语,计算机编程英语词汇
- 在WinCE中实现Screen Rotation(屏幕旋转)
- linux管道通信题目,操作系统实训(Linux)——习题解答、例题解析、实验指导-王红-实验实验7软中断及管道通信课案.ppt...
- Leetcode每日一题:204.count-primes(计数质数)
- python pymysql模块 链接mysql 遍历查询结果的方法 详解
- linux查看u盘的分区,在Linux下访问windows分区以及U盘
- regsvr32.exe是什么东西
- 数控仿真模拟Keller CNC SYMplus v5.0-ISO
- mybatis中显示Type interface com.javacto.dao.UserMapper is not known to the MapperRegistry.
- 汇编语言:8421 BCD码加减法的修正问题
- cmd中通过winsat命令测试硬盘、CPU、内存、3d性能等
- MySQL多表事务(三)
- 关于三角形的心及费马点
- spring常见漏洞总结
- 高手路过--菜鸟版系统安装==(图文安装教程)+(最新win7+win8系统)+系统工具
- **区块链培训步入标准化阶段,比特大学开启系统性学习课程**