为什么我的红色盒子无法实现像小关闭按钮不动效果，我的代码是这样的。-慕课网

为什么我的红色盒子无法实现像小关闭按钮不动效果，我的代码是这样的。

来源：2-1 别把我和relative栓在一起

aiwei笑

2015-09-23 09:24

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>overflow失效妙用</title>
<style type="text/css">
body{background:#ccc;}
.con{width:80%;height:1000px; background:#6CF; margin:0 auto;}
.h0{height:0px;}
.ovh{overflow:hidden;}
.tr{text-align:right;}
.box{width:48px; height:48px; background:#f00;}
.abs{position:absolute;}
.ml10{right:0px;}
.mt30{top:0px;}
</style>
</head>

<body>
<div class="con">
<div class=" h0 0vh tr "> <div class="box abs ml10 mt30" />
</div>
</div>
</body>
</html>

写回答关注

6回答

First_Mover

2015-09-23 10:53:52

已采纳

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
.header {
padding: 10px 0 0;
position: fixed;
width: 300px;
height:50px;
background-color:#000;
opacity: 0.2;
filter:alpha(opacity=20);
}
</style>
</head>
<body>
<div style="position: absolute; left: 0px; top: 100px;">
<div class="header">
</div>
</div>
<div style="height:2000px; background-color: #DEFBFF;"></div>
</body>
</html>
你看看这个是不是你想要的，还有就是你上面的代码有很多错误，虽然运行不出来，但是标签要打全，定义的class也要一致，再好好看看。

0 0
echo_kinchao

2015-09-23 17:57:20

position:fixed

0 0
aiwei笑

2015-09-23 10:43:52

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>overflow失效妙用</title>
<style type="text/css">
body{background:#ccc;}
.con{width:80%;height:1000px; background:#6CF; margin:0 auto;}
.h0{height:0px;}
.ovh{overflow:hidden;}
.tr{text-align:right;}
.box{width:48px; height:48px; background:#f00;display:inline;}
.abs{position:absolute;}
.ml10{right:0px;}
.mt30{top:0px;}
</style>
</head>

<body>
<div class="con">
<div class=" h0 0vh tr "> <div class="box abs ml10 mt30" ></div>
</div>
</div>
</body>
</html>
---------------------------------------------------------------------
还是无法实现

0 0
First_Mover

2015-09-23 10:39:09

你先把自己的代码补全，看看还有打错的没有，仔细检查。

0 0
aiwei笑

2015-09-23 10:11:41

脱离主体，悬浮在窗口右上角，不随滚动栏滚动而消失

0 0
First_Mover

2015-09-23 10:03:22

你说的不动是什么意思，是随着主体一起还是怎么？

1 0

aiwei笑

脱离主体，悬浮在窗口右上角，不随滚动栏滚动而消失

2015-09-23 10:12:06

共 1 条回复 >

CSS深入理解之absolute

理解CSSposition:absolute声明，掌握position:absolute高级应用

51957 学习 · 254 问题

查看课程

相似问题

PC端为什么布局失败呢？没有展现出fixed的效果

回答 1

求解如果我有一张图片，我想在这张图片上设置我需要的效果，也可以不设置position：relative；吗？

回答 1

我想问下前端组件到底是长什么样子呀？

回答 2

怎么实现的啊？

回答 2

li:after 里面的height:30px; 实现垂直居中，为什么是30px 与font-size有关系吗？

回答 2

打开慕课网App查看更多内容