CSS布局，子级DIV固定定位于父级DIV的右侧，不随浏览器的滚动而滚动
右边的盒子绝对定位于父级DIV的右侧，这样布局没问题，但是当浏览器下拉时，右侧的DIV也跟随移动。而我想要的效果是，右侧DIV固定在父级DIV的右侧，不随浏览器的滚动而滚...
右边的盒子绝对定位于父级DIV的右侧，这样布局没问题，但是当浏览器下拉时，右侧的DIV也跟随移动。而我想要的效果是，右侧DIV固定在父级DIV的右侧，不随浏览器的滚动而滚动。。我试过使用fixed固定定位，但样式就变了。。
HTML代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>定位</title>
<script src="jquery-1.11.0.min.js"></script>
<style type="text/css">
*{margin:0px;padding:0px;}
#parent{
max-width: 760px;
height: 700px;
border:1px red solid;
margin:0px auto;
position: relative;
}
#title{
height: 50px;
line-height: 50px;
background: green;
color:#fff;
text-align: center;
position: fixed;
top:0px;
width: 100%;
max-width: 760px;
}
#right{
border:1px #c00 solid;
width: 50%;
height: 100%;
position: fixed;
/*position: absolute;*/
right:0px;
top:50px;
}
</style>
</head>
<body>
<div id="parent">
<div id="title">标题内容</div>
<div id="right">右部固定DIV</div>
</div>
</body>
</html>
请高手指点一二。。 展开
HTML代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>定位</title>
<script src="jquery-1.11.0.min.js"></script>
<style type="text/css">
*{margin:0px;padding:0px;}
#parent{
max-width: 760px;
height: 700px;
border:1px red solid;
margin:0px auto;
position: relative;
}
#title{
height: 50px;
line-height: 50px;
background: green;
color:#fff;
text-align: center;
position: fixed;
top:0px;
width: 100%;
max-width: 760px;
}
#right{
border:1px #c00 solid;
width: 50%;
height: 100%;
position: fixed;
/*position: absolute;*/
right:0px;
top:50px;
}
</style>
</head>
<body>
<div id="parent">
<div id="title">标题内容</div>
<div id="right">右部固定DIV</div>
</div>
</body>
</html>
请高手指点一二。。 展开
- 你的回答被采纳后将获得：
- 系统奖励15（财富值+成长值）+难题奖励30（财富值+成长值）
1个回答
展开全部
#parent{
max-width: 760px;
height: 700px;
border:1px red solid;
margin:0px auto;
}
#title{
height: 50px;
line-height: 50px;
background: green;
color:#fff;
text-align: center;
top:0px;
width: 100%;
max-width: 760px;
}
#right{
border:1px #c00 solid;
width: 50%;
height: 100%;
/*position: fixed;*/
position: absolute;
right:0px;
top:50px;
}
你试试这个css样式，看看是不是你要的效果
max-width: 760px;
height: 700px;
border:1px red solid;
margin:0px auto;
}
#title{
height: 50px;
line-height: 50px;
background: green;
color:#fff;
text-align: center;
top:0px;
width: 100%;
max-width: 760px;
}
#right{
border:1px #c00 solid;
width: 50%;
height: 100%;
/*position: fixed;*/
position: absolute;
right:0px;
top:50px;
}
你试试这个css样式，看看是不是你要的效果
追问
你的CSS跟我的CSS有什么区别吗？右侧DIV固定在浏览器的右侧，不是固定在#parent的右侧~~不是我想要的效果，你写的CSS我上面已写过了~~
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
