
1、新建一个html文件,命名为test.html,用于讲解html如何将一个div置于最上层。
2、在test.html文件内,使用div标签创建两个模块,并分别设置它们的id为testone,testtwo。
3、在css标签内,统一设置div的样式,定义它们的位置属性为绝对定位,宽度和高度为300px。
4、在css标签内,设置id为testone的样式,定义其背景颜色为红色,同时使用z-index属性定义其为最上层。
5、在css标签内,设置id为testtwo的样式,定义其背景颜色为蓝色,距离左边和距离上边的位置为20px。
6、在浏览器打开test.html文件,查看实现的效果。
element{position: fixed
top:0
left:0
z-index:(最高层的元素的层数+1)
}
用绝对定位+确定层数即可
最外层html双标签,里面分别是头部(head双标签)、身体(body双标签)。头部html用来包裹整个html文档
head一般用来放诸如meta、link、script等标签。
body用来放各种常用的标签(div,h1-h6,a,p,header,section,script等)。
简树如下:(html5规范)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
<title>网站标题</title>
<link href="css/min.css" rel="stylesheet">
</head>
<body>
<h1>你好,世界!</h1>
<div>我是你的啥</div>
</body>
</html>
欢迎分享,转载请注明来源:内存溢出
微信扫一扫
支付宝扫一扫
评论列表(0条)