网页布局案例2-4编程练习

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">	
	<title>CSS布局</title>
	<style type="text/css">
		*{
			margin: 0;
			padding:0;
		}
		img{
			 width: 380px;
			height: 240px;
		}
		/*此处写代码*/
		.layer{height:240px;
		       position:absolute;
		       width:380px;
		       opacity:0.5;
		       top:0;
		       background-color:#000;
		}
	</style>
</head>
<body>
<nav>
</nav>
	<div>
		<img src="http://img1.sycdn.imooc.com/climg//58f829ca00010be703840240.jpg">
	</div>
	<!-- 此处写代码 -->
	<!--遮罩层-->
	<div class="layer"></div>
	
</body>
</html>

老师，这样的代码有没有问题。符合题目要求吗？

soso_crazy 2018-08-05

源自：项目：网页布局案例 2-4 编程练习

收起

3回答

Miss路 2018-08-08 10:39:59

1、只要定义position:absolute绝对定位，就要定义相对的点，要给它一个具体的参考点，但是这个相对点必须要是父级才行，这个父级元素不一定必须要写position:relative，也可以写position:absolute，或者position:fixed。上条回复中忘记告诉你把nav的结束标签下移了，或者是给两个div再加一个父级元素，给设置定位就可以了，如果给nav设置的话，html要写成这样的：

题目中给出的nav可以不用，也可以把它作为遮罩层去写，只不过你这里重新写了一个div当成遮罩层，这个问题不大，用什么标签都可以，主要看怎么设置样式。

2.这里用position的relative和absolute都可以

3.position绝对定位就是要让元素在父级的左上角，可以不写，因为它本身有个默认的值，就是0，但是一般只要给出具体位置的，一定要搭配left和top或者right、bottom去调整位置。

如果帮助到了你，欢迎采纳！

收起回答

Miss路 2018-08-06 10:39:42

写的不太严谨，虽然有效果。参考下面的样式：

我圈住的这几行，是实现定位的一个最基本的几行代码，少了哪个都不行，

要有相对的点（父级），也要给定位的元素设置position属性，还要有位置的设置，虽然有默认的，但是还是要写上会比较严谨。

如果帮助到了你，欢迎采纳！

收起回答

提问者 soso_crazy #1

1.为什么要增加nav{position:relative}?题目给出的<nav></nav>有什么用？可以用img{position:relative}来代替nav{position:relative}吗？ 2.为什么2-3视频中是两个position都是absolute，而这里要用position是relative和absolute？ 3.position绝对定位一定要要有left和top两个位置的定位吗？

2018-08-07 20:54:08