CSS定位属性Position详解(2)
作者:帕兰 来源:帕兰映像 时间:2009-09-16 20:37:00
4. position:relative + position:absolute
如果我们给 div-1 设置 relative 定位,那么 div-1 内的所有元素都会相对 div-1 定位。如果给 div-1a 设置 absolute 定位,就可以把 div-1a 移动到 div-1 的右上方。
#div-1 {
position:relative;
}
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}
5. 两栏绝对定位
现在就可以使用相对定位和绝对定位来做一个两栏布局了。
#div-1 {
position:relative;
}
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}
#div-1b {
position:absolute;
top:0;
left:0;
width:200px;
}
6. 两栏绝对定位定高
一种方案是给元素设定固定高度。但这种方案对大多数设计来说不太适合,因为一般我们不知道元素中会有多少文本,或者将要使用的精确的字号。
#div-1 {
position:relative;
height:250px;
}
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}
#div-1b {
position:absolute;
top:0;
left:0;
width:200px;
}
标签:css,定位,position
0
投稿
猜你喜欢
linux系统使用vscode进行qt开发的过程分享
2023-06-23 02:33:54
如何在Python对Excel进行读取
2022-02-25 15:51:59
Linux(Redhat)安装python3.6虚拟环境(推荐)
2022-06-08 23:34:13
JDBC连接mysql处理中文时乱码解决办法详解
2024-01-17 21:35:35
Python操作Elasticsearch处理timeout超时
2022-04-23 02:42:18
Python压缩解压缩zip文件及破解zip文件密码的方法
2023-04-20 10:30:30
Python绘图模块 turtle案例代码
2022-12-16 01:28:10
python随机生成指定长度密码的方法
2023-08-07 07:24:00
vue.js指令v-for使用及索引获取
2024-04-30 10:46:49
css布局自适应高度方法
2007-05-11 17:03:00
Bootstrapvalidator校验、校验清除重置的实现代码(推荐)
2024-04-10 13:52:57
Python学习入门之区块链详解
2021-07-15 18:21:55
Django自定义用户表+自定义admin后台中的字段实例
2022-05-27 08:16:01
Informatica bulk与normal模式的深入详解
2024-01-16 01:30:28
用什么库写 Python 命令行程序(示例代码详解)
2023-01-01 09:35:10
mysql 8.0.25 解压版安装配置方法图文教程
2024-01-13 06:56:25
Python使用Selenium模块模拟浏览器抓取斗鱼直播间信息示例
2023-06-13 09:23:30
抛砖引玉Web2.0设计指南
2008-06-30 12:49:00
服务器XMLHTTP(Server XMLHTTP in ASP)基础知识
2011-03-06 11:11:00
人工智能——K-Means聚类算法及Python实现
2022-02-04 19:04:43