css div 固定一个div 使这个div不随着网页的滚而滚动 就是把这个div固定在一个位置任何时候都在一个位置
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css div 固定一个div 使这个div不随着网页的滚而滚动 就是把这个div固定在一个位置任何时候都在一个位置相关的知识，希望对你有一定的参考价值。
1、需要使用固定定位才能做到这样的效果。具体方法是首先打开html编辑器，首先设置一个容器div，然后设置一个用来演示效果的div，分别设置class属性名为container和fixed：
2、在style标签中设置样式，设置container的position属性为相对定位，并且给它一个很高的高度，然后给fixed设置高度和宽度，以及颜色等属性，这里的重点是设置position属性为fixed，以及设置top和left属性控制div的位置，设置完成后保存文件：
3、打开浏览器，可以看到div并且可以观察到进度条是最上面的：
4、接着将进度条拉倒最下面，可以发现div还是在原来的位置保持不变。以上就是用fixed属性设置div固定位置的方法：
.a
width:100px;
height:40px;
background-color:#0CF;
position:fixed;
top:100px;
.b
width:400px;
height:3000px;
background-color:#CC0;
</style>
<body>
<div class="a">菜单</div>
<div class="b">子菜单<br>子菜单<br>子菜单<br>子菜单<br>子菜单<br>子菜单<br>子菜单</div> 参考技术B 给div加个position:fixed;top:0px; left:0px;可让该div固定在网页的顶部左侧，且不会随网页而滚动。如若想固定在其他位置，只需要改动top,left,right,bottom属性值即可。 参考技术C 用绝对定位
//绝对定位和相对定位
position: absolute;
z-index: 100;
left: 100px;
top: 100px;
--------------------
position: relative;父元素
position: absolute;子元素 参考技术D 用CSS的position:fixed; 绝对定位
<div style="width:50px; height:50px; background:blue;top:80px; position:fixed; ">不动</div>
CSS - 使 div 水平对齐
【中文标题】CSS - 使 div 水平对齐【英文标题】：CSS - Make divs align horizontally 【发布时间】：2010-09-07 10:00:33 【问题描述】：我有一个带有固定width 和height 的容器div，带有overflow: hidden。
我想要一个水平的浮动行：这个容器内的左 div。向左浮动的 Div 在读取其父级的右边界后自然会推到下面的“线”上。即使父母的height 不允许这样做，也会发生这种情况。看起来是这样的：
我希望它看起来如何：
![Right][2] - 删除了已被广告替换的图像小屋图像
注意：我想要的效果可以通过使用内联元素和white-space: no-wrap来实现（我在显示的图像中就是这样做的）。然而，这对我没有好处（原因太长，无法在此解释），因为子 div 需要浮动块级元素。
【问题讨论】：
您的图片链接似乎已损坏。如果您还有原件，请重新上传到 stack.imgur。谢谢！ 【参考方案1】：您可以在容器中放置一个足够宽以容纳所有浮动 div 的内部 div。
#container
background-color: red;
overflow: hidden;
width: 200px;
#inner
overflow: hidden;
width: 2000px;
.child
float: left;
background-color: blue;
width: 50px;
height: 50px;
<div id="container">
<div id="inner">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</div>【讨论】：
我怎样才能使外部 div 中心？我尝试在外部 div 上添加 align="center"，似乎不起作用。 这也适用于百分比宽度。在我的情况下，我使用带有width: 200%; 的容器div，并且每个子元素都是width: 50%;。只要我有一个带有overflow: hidden;的父容器，我就可以在容器上使用transform: translateX(n%);来模拟轮播效果。【参考方案2】：
style="overflow:hidden" 用于父级div 和style="float: left" 用于所有子级divs 对于使divs 水平对齐对于IE7 及更低版本的旧浏览器非常重要。
对于现代浏览器，您可以将style="display: table-cell" 用于所有子divs，它会正确水平呈现。
【讨论】：
【参考方案3】：如果需要，您现在可以使用 css flexbox 水平和垂直对齐 div。一般公式是这样的
parent-div
display: flex;
flex-wrap: wrap;
/* for horizontal aligning of child divs */
justify-content: center;
/* for vertical aligning */
align-items: center;
child-div
width: /* yoursize for each div */
;
【讨论】：
优雅的解决方案。【参考方案4】：这似乎接近你想要的：
#foo
background: red;
max-height: 100px;
overflow-y: hidden;
.bar
background: blue;
width: 100px;
height: 100px;
float: left;
margin: 1em;
<div id="foo">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>【讨论】：
【参考方案5】：您可以使用clip 属性：
#container
position: absolute;
clip: rect(0px,200px,100px,0px);
overflow: hidden;
background: red;
请注意 position: absolute 和 overflow: hidden 以使 clip 正常工作。
【讨论】：
clip 的浏览器支持什么？ 来自w3schools.com/cs-s-ref/pr_pos_clip.asp：所有主流浏览器都支持clip属性。注意：IE7 及更早版本不支持值“inherit”。 IE8 需要一个!DOCTYPE。 IE9 支持“继承”。【参考方案6】：float: left, display: inline-block 如果元素超过容器的宽度，都将无法水平对齐元素。
请务必注意，如果元素必须水平显示，则容器不应换行：
white-space: nowrap
【讨论】：
【参考方案7】：让它们向左浮动。至少在 Chrome 中，您不需要在 LucaM 的示例中使用包装器 id="container"。
【讨论】：
【参考方案8】：你可以这样做：
#container
background-color: red;
width: 200px;
.child
background-color: blue;
width: 150px;
height: 50px;
<div id="container">
<div id="inner">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</div>【讨论】：
以上是关于css div 固定一个div 使这个div不随着网页的滚而滚动 就是把这个div固定在一个位置任何时候都在一个位置的主要内容，如果未能解决你的问题，请参考以下文章