慕课网的助教！出来帮我看看，还是不行

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding:0;
    }
    .test{
     width: 800px;
     height: 100px;
     background: red;
     /*此处写代码*/
     position:fixed;
    /*left:0;
    right:0;
    top:0;
    bottom:0;
    margin:0 auto;*/
    top:0;
    left:50%;
    margin-left:-400px;
    
   
   }
   .out{
    width: 100%;
    height: 2000px;
    background-color: #abcdef;
  }
</style>
</head>
<body>
  <div class="out">
    <div class="test"></div>
  </div>
</body>
</html>

qq_蓝骏毅_04076633 2018-08-02

源自：CSS定位（position） 2-14 编程练习

收起

3回答

妮可妮可妮_ 2018-08-03 09:35:50

因为.opacity设置了position: fixed;,并且高度为100%,所以将.con的内容遮住了,建议给.opacity调整适当的高度,或者去掉固定定位都是可以看到.con部分的,

建议同学下次有问题新建问答进行提问,在同一个问答中提问很有可能被忽略,

如果可以解决你的疑惑,记得采纳哦~祝学习愉快~

收起回答

不正经的大脑斧 #1

你看错题目了吧同学，看得我一脸懵逼。

2018-08-18 01:56:30
妮可妮可妮_ 回复不正经的大脑斧 #2

你好同学,我回复的是提问同学修改之后的第二问:为什么.con的图片不出来的,问题在楼下哦!

2018-08-19 11:23:10

提问者 qq_蓝骏毅_04076633 2018-08-02 22:41:21

为什么.con的图片不出来的
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				width: 100%;
				height: 100%;
			}
			/*.con{
				width:100%;
				height: 4000px;
				background:url(img/mooc.png)
				center top no-repeat;
			}*/
			
			.con{
				width:100%;
				height: 4000px;
				background:url(img/mooc.png)
				center top no-repeat;
			}
			
			.opacity{
				width: 100%;
				height:100%;
				background: pink;
				position: fixed;
				left: 0;
				top: 0;
			}
			.login{
				width: 360px;
				height: 360px;
				background: url(img/login.png)
				no-repeat;
				position: fixed;
				left: 50%;
				top: 50%;
			}
		</style>
	</head>
	<body>
		<div class="con"></div>
		<div class="opacity"></div>
		<div class="login"></div>
	</body>
</html>

收起回答