position用法
2024-08-31 17:31:15
fixed的用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-header{
background-color: red;
height: 48px;
/*添加position后可以使该div与其他div处于屏幕的不同层，fixed为将该div固定到浏览器窗口的指定位置，
top、bottom、right、left四个方位代表了离屏幕有多少距离*/
position: fixed;
top: 0px;
right: 0px;
left: 0px;
}
.pg-body{
background-color: darkgray;
height: 5000px;
margin-top: 50px;
}
.pg-back_to_top {
background-color: black;
color: white;
height: 50px;
width: 50px;
position: fixed;
right: 10px;
bottom: 10px;
}
</style>
</head>
<body>
<div class="pg-header">标题</div>
<div class="pg-body">内容</div>
<div onclick="GoTop();" class="pg-back_to_top">返回顶部</div>
<script>
function GoTop(){
console.log("123")
document.documentElement.scrollTop = 0;
}
</script>
</body>
</html>
absolute和relative用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--position的relative如果单独使用，没有任何效果，因为它是自己定义自己，对div自己没有任何实际意义。
但如果这个div的内部还有div，而且这个内部的div想要定义自己相对于父div的位置，就需要在自己的position
属性添加absolute-->
<div style="position:relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto">
<div style="position: absolute;bottom: 0px;width: 50px;height: 50px;background-color: black"></div>
</div>
<div style="position:relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto">
<div style="position: absolute;top: 0px;right: 0px;width: 50px;height: 50px;background-color: black"></div>
</div>
<div style="position:relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto">
<div style="position: absolute;top: 0px;width: 50px;height: 50px;background-color: black"></div>
</div>
</body>
</html>e
z-index属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--z-index可以设置层级页面的优先级，值越大，优先级越高，优先级高的放在最上面-->
<div style="z-index: 10;background-color: white;position: fixed;height: 200px;width: 400px;
top: 50%;left: 50%;margin-top: -200px;margin-left: -200px">
<input type="text"/>
<input type="text"/>
<input type="text"/>
</div>
<div style="z-index:9;position: fixed;background-color: darkgray;
top: 0;
bottom: 0;
left: 0;
right: 0;
/*opacity属性为设置div的透明度，值越大，背景色越深*/
opacity: 0.5"></div>
<div style="height: 5000px;background-color: green">第一层页面</div>
</body>
</html>
最新文章
- angular2开发01
- UI背景构建
- 转：探秘腾讯Android手机游戏平台之不安装游戏APK直接启动法
- Spark中shuffle的触发和调度
- 【39】明智而审慎第使用private继承
- HDU 3304 Interesting Yang Yui Triangle lucas定理
- jQuery复习：第五章
- Centos硬盘IO性能检测命令iostat[转]
- Java 学习之反射机制“解刨”分解类，并获取内容！
- Graph Cuts学习笔记2014.5.16----1
- 源码编译安装php7
- CSS 关于权重的另类解说
- Spring MVC+ Spring + Mybatis从零开始搭建一个精美且实用的管理后台
- ${pageContext.request.contextPath}无法解析
- tomcat 修改jdk版本号
- Nginx配置优化参考
- UVa 11212 编辑书稿（dfs+IDA*）
- Linux下类似windows下_beginthread和_endthread 的多线程开发
- 20155334 2016-2017-2 《Java程序设计》第一周学习总结
- java学习笔记14--多线程编程基础1