CSS布局，子级DIV固定定位于父级DIV的右侧，不随浏览器的滚动而滚动
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS布局，子级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>
请高手指点一二。。
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我上面已写过了~~
CSS fixed 布局嵌套的一些问题
参考技术A 之前遇到过 fixed 布局嵌套的一些场景， fixed 布局是针对 body 定位的，但是在某些特殊情况下，子级的 fixed 会受到父级 fixed 的影响，除了需要 z-index 来区分层级，还要注意 transform 的使用（貌似好多地方 transform 都会引发问题）一般的场景是一个遮罩加一个弹框
效果是这样的
这个时候在内部的 children 再使用 fixed 布局时，就会被父级的 fixed 元素限制住
1、父级不使用 tansform
2、不进行嵌套
以上是关于CSS布局，子级DIV固定定位于父级DIV的右侧，不随浏览器的滚动而滚动的主要内容，如果未能解决你的问题，请参考以下文章
父级div宽度100%,子级一个div宽度固定，另一个宽度自适应
css父级没包住子级是怎么回事，我用firebug查看，确实在父级的div中，但是就是没有包括子级的内容
css如何设置能让一个div元素覆盖在div元素上后下面的div元素中的文字不显示出来