css 脱离文档流
2024-10-08 05:51:40
一、float
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>脱离文本流</title>
<style>
.c1{
height: 100px;
width: 100px;
background-color: brown;
} .c2 {
height: 150px;
width: 150px;
background-color: blueviolet;
float: right;
} .c3 {
height: 200px;
width: 200px;
background-color: red;
}
</style>
</head>
<body>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
</body>
</html>
二、absolute
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>脱离文本流</title>
<style>
.c1{
height: 100px;
width: 100px;
background-color: brown;
} .c2 {
height: 150px;
width: 150px;
background-color: blueviolet;
position: absolute;
left: 200px;
} .c3 {
height: 200px;
width: 200px;
background-color: red;
}
</style>
</head>
<body>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
</body>
</html>
三、fixed
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>脱离文本流</title>
<style>
.c1{
height: 100px;
width: 100px;
background-color: brown;
} .c2 {
height: 150px;
width: 150px;
background-color: blueviolet;
position: fixed;
left: 400px;
} .c3 {
height: 200px;
width: 200px;
background-color: red;
}
</style>
</head>
<body>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
</body>
</html>
最新文章
- 工厂食堂3D指纹考勤系统解决方案
- HTML 学习笔记 CSS(轮廓)
- Value cannot be null or empty. 参数名: contentPath
- 如何hash一条有向边
- 优化系统资源ulimit《高性能Linux服务器构建实战：运维监控、性能调优与集群应用》
- 【聚类算法】谱聚类(Spectral Clustering)
- Selenium自动化测试（java语言）
- jQuery插件开发方法
- CSS变量variable
- 子查询。ANY三种用法。ALL两种用法。HAVING中使用子查询。SELECT中使用子查询。
- win7 64位安装redis 及Redis Desktop Manager使用(转载的)
- Android重构篇——项目架构篇
- 咏南中间件支持JWT TOKEN
- Python模块 os和sys
- day14_雷神_前端02
- 理解TIME_WAIT
- js实现滑动的弹性导航
- PTA——输出各位数字
- 从hive将数据导出到mysql（转）
- Problem G: 部分复制字符串
热门文章
- CCPC 2018 吉林 C "JUSTICE" （数学）
- JavaScript 面向对象的拖拽
- git authentication failed for 或 fatal:not a git repository
- Visual Studio Team Services使用教程【5】：Readers tfs组成员添加
- qt添加cef库嵌入web，linux 下Qt WebEngine 程序打包简单记录
- vagrant在windows下的安装和配置（二）
- Python反射笔记
- Java内存模型之有序性问题
- 天猫SSM项目学习记录(一）----第一个相对完整的SSM项目
- zabbix安装完成后查看编译参数