                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /CSS深入理解之absolute

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

<!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>

aiwei笑

2015-09-23

源自：CSS深入理解之absolute 2-1

关注问题我要回答

1488

操作

收起

6 回答

First_Mover
2015-09-23

<!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 回复有任何疑惑可以回复我~

echo_kinchao
2015-09-23

position:fixed

0 回复有任何疑惑可以回复我~

aiwei笑提问者
2015-09-23

<!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 回复有任何疑惑可以回复我~

First_Mover
2015-09-23

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

0 回复有任何疑惑可以回复我~

aiwei笑提问者
2015-09-23

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

0 回复有任何疑惑可以回复我~

First_Mover
2015-09-23

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

0 回复有任何疑惑可以回复我~

#1

aiwei笑提问者

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

2015-09-23 回复有任何疑惑可以回复我~

举报

0/150

提交

取消

CSS深入理解之absolute

参与学习 51957 人
解答问题 254 个

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

本课相似问答

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

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

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

2 回答怎么实现的啊？

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

搜索更多本课相关问答

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

我要回答关注问题

意见反馈帮助中心 APP下载