Positioning
2024-08-21 10:01:25
boxPostion.html
<html>
<head>
<title>Box Position</title>
<meta charset="utf-8">
<link rel="stylesheet" href="boxPosition.css">
</head>
<body>
<head>
<title>Box Position</title>
<meta charset="utf-8">
<link rel="stylesheet" href="boxPosition.css">
</head>
<body>
<div class="box" id="one">One</div>
<div class="box" id="two">Two</div>
<div class="box" id="three">Three</div>
<div class="box" id="four">Four</div>
<div class="box" id="two">Two</div>
<div class="box" id="three">Three</div>
<div class="box" id="four">Four</div>
</body>
</html>
</html>
boxPosition.css
.box {
display: inline-block;
width: 100px;
height: 100px;
background: red;
color: white;
}
display: inline-block;
width: 100px;
height: 100px;
background: red;
color: white;
}
#two {
position: relative;
top: 20px;
left: 10px;
background: blue;
}
position: relative;
top: 20px;
left: 10px;
background: blue;
}
#three {
position: absolute;
top:100px;
left:100px;
background: pink;
}
position: absolute;
top:100px;
left:100px;
background: pink;
}
#four {
position: sticky;
top:20px;
left: 200px;
background: green;
}
position: sticky;
top:20px;
left: 200px;
background: green;
}
效果图
最新文章
- MYSQL语句中SELECT语句及其子句的执行顺序
- UVaLive 6802 Turtle Graphics (水题,模拟)
- 【转】Netty那点事(一)概述
- VS2008压力测试时web测试记录器无显示
- JAVA学习JSTL与EL
- 认识ASP.NET MVC6
- codeforce 611C New Year and Domino
- JavaEE开发之Spring中的条件注解组合注解与元注解
- NIO FileChannel
- [bzoj1997][Hnoi2010]Planar(2-sat||括号序列)
- Java运行时环境---内存划分
- 团体程序设计天梯赛(CCCC) L3019 代码排版 方法与编译原理密切相关,只有一个测试点段错误
- 使用easyui搭建网页架子
- c++算法实现(一) - 递归和初始化
- Javascript入门(二)变量、获取元素、操作元素
- RouterOS配置静态IP上网/RouterOS做为二级路由上网
- webapi 实体作为参数,自动序列化成xml的问题
- 使用RVM轻松部署Ruby环境
- 微信小程序调用api接口
- RTP 学习
热门文章
- pandas的时间戳
- 2017-09-21xlVBA_蒸发SQL循环查询1
- 模拟curl函数
- 4.1.6 Grundy数-硬币游戏2
- AS(Android Studio)不停的updating indices
- git 更新代码到本地
- 导出函数__declspec(dllexport)
- MinGW安装教程( MinGW - Minimalist GNU for Windows)
- 2017-6-6&;6-8/大型网站架构总结
- docker实战系列之docker 端口映射错误解决方法