我有一个大div,里面有很多个小div,大div设置了滚动条，我想第一个小div不受滚动条影响,始终显示.

Posted 2023-05-15

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了我有一个大div,里面有很多个小div,大div设置了滚动条，我想第一个小div不受滚动条影响,始终显示.相关的知识，希望对你有一定的参考价值。

蓝色部分想固定始终显示

设置滚动条的话只要是div内部的内容都会随着滚动条而移动；所以你想内容不受影响，那么就让它不要在div里面不就行了？比如设置绝对定位让div移动到位置，又或者是这个小div本来是与大div是同级的，你设置负值的外边距margin-bottom:-30px;就可以移动到下面去追问

设置在大div外面我了解，主要是想知道有没有这个解决方法，新手上路，谢谢指教了。

追答

给你写了2个例子，你应该能理解的
例1：

内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容

例2：

内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容

追问

例2是我想要的效果，能不能详细解释一下之中position:的意义呢，麻烦了~

参考技术A 可以实现的。稍微以下代码即可。
<div style="position:absolute;z-index:100;background:#eeeeee;margin-top:1px;">
固定不动的内容在此
</div>

<div style="overflow:scroll;width:200px;height:200px;border:1px solid red;position:absolute;z-index:1;padding-top:10px;">

<div style="width:100px;">
ggggggggg<br/>gggggggg<br/>gggggg<br/>ggggg<br/>gggggg<br/>ggggg<br/>gggggggg< br/>ggggggg<br/>ggggggg<br/>ggggggggg<br/>gggggsda<br/>fgsdfsdfsdfsdfsd </div>
</div>

</div>追问

很感谢的你回答，也达到了我想要的效果，我想问一下，使用position:absolute这个绝对位置，不是不能用margin属性吗？

追答

用absolute，如果用TOP,LEFT 属性时，的确不能与margin等属性共用。
但此处，没有TOP,LEFT，margin是可用的。

关键：此处的ABSOLUTE 存在是为了让Z-INDEX属性起作用,而非为了定位。

本回答被提问者和网友采纳参考技术B <div style="position:relative;">
<div style="position:absolute; z-index:99; left:0; background:blue; width:100px;">固定内容</div>
<div style="overflow:scroll; width:200px; height:200px;">下<br />方<br />随<br />滚<br />动<br />条<br />滚<br />动<br />的<br />内<br />容</div>
</div> 参考技术C <div style="position:absolute;z-index:100;background:#eeeeee;margin-top:1px;">
固定不动的内容在此
</div>

<div style="overflow:scroll;width:200px;height:200px;border:1px solid red;position:absolute;z-index:1;padding-top:10px;">

<div style="width:100px;">
ggggggggg<br/>gggggggg<br/>gggggg<br/>ggggg<br/>gggggg<br/>ggggg<br/>gggggggg< br/>ggggggg<br/>ggggggg<br/>ggggggggg<br/>gggggsda<br/>fgsdfsdfsdfsdfsd </div>
</div>

</div> 参考技术D 改第一个小div的CSS样式
position: fixed;

父圆形 div 内的圆形 div

【中文标题】父圆形 div 内的圆形 div【英文标题】：Round divs inside a parent round div 【发布时间】：2016-02-14 03:47:32 【问题描述】：

我想问是否可以将圆角 div 插入圆形 div。它们应该以循环方式插入，一个接一个。我想创建一个圆形 div 环，而不改变父 div 的大小。如果你知道怎么做，我将不胜感激。

【问题讨论】：

你要两个圆，一大一小里面大一个？我想要一个大圆圈，以及许多其他人在那个圆圈内创建一个环。小 div 应该留在大 div 的边界。或者我想创建一个由许多圆形 div 组成的环。 【参考方案1】：

您可以将外部元素定义为位置：相对，而将内部元素定义为绝对。边距将起到拉开彼此距离的作用。

.circle
  width:256px;
  height:256px;
  border-radius:50%;
  background: rgba(255, 99, 71, 0.5);
  border:3px solid white;
  position:relative;


.circle >  .circle
  width:initial;
  height:initial;
  position:absolute;
  left:0;
  top:0;
  right:0;
  bottom:0;
  margin:20px;

<div class="circle">

  <div class="circle">
  
    <div class="circle">
  
    </div>
    
  </div>
  
</div>

【讨论】：

如果有人想知道如何让它在 Internet Explorer 下运行，这就是我的回答：***.com/questions/20823105/…【参考方案2】：

<div id="one">
<div id="two"></div></div><style type="text/css">
#one
    height: 120px;
    width: 120px;
    background: #333;
    border-radius: 60px;

#two
    height: 60px;
    width: 60px;
    background-color: white;
    border-radius: 30px;
    position: absolute;
    top: 35px;
    left: 35px;

这将为您工作。根据您的意愿进行调整。

【讨论】：

谢谢。现在我可以在父级中创建许多 div 并通过更改 css: top: px; 来创建一个圆环。左：像素；右：像素；等英雄:) 你有没有注意到你的实现有问题？嘿极客，这不是我们的作业... 将其视为模板。 :p【参考方案3】：

如果您乐于使用固定的宽度和高度，这很容易。

<!DOCTYPE html>
<html>

<body>
    <div style="padding: 4px; width: 32px; height: 32px; border-radius: 20px; background-color: red;">
        <div style="padding: 4px; width: 24px; height: 24px; border-radius: 16px; background-color: orange;">
            <div style="padding: 4px; width: 16px; height: 16px; border-radius: 12px; background-color: yellow;">
                <div style="padding: 4px; width: 8px; height: 8px; border-radius: 8px; background-color: green;">
                </div>
            </div>
        </div>
    </div>
</body>

</html>

给他们一个你想要的任何环厚度的填充，然后每个环的宽度和高度都需要（填充 x 2）小于其父级。每个 div 的边框半径需要是其外部宽度的一半（其中外部宽度 = 宽度 + (padding x 2)）。

示例：http://doug.exploittheweb.com/SO/33677891.html

【讨论】：

上面的代码在 div 中创建了圆形 div。我想要圆角 div 来创建一个圆圈，就像一个环【参考方案4】：

第一种使用相对绝对 div 的方法 https://jsfiddle.net/2Lzo9vfc/67/

HTML

<div class="big-circle">
    <div class="small-circle">
        <div class="extra-small-circle">

        </div>
    </div>
</div>

CSS

.big-circle 
    position: relative;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: black;


.small-circle 
    background: red;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50px, -50px);


.extra-small-circle 
    background: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-25px, -25px);

使用渐变的第二种方式 https://jsfiddle.net/2Lzo9vfc/69/

HTML

<div class="circle"></div>

CSS

.circle 
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: #ffffff; /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover, #ffffff 17%, #ff0a0a 19%, #ff2828 40%, #000000 41%); /* FF3.6-15 */
    background: -webkit-radial-gradient(center, ellipse cover, #ffffff 17%,#ff0a0a 19%,#ff2828 40%,#000000 41%); /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center, #ffffff 17%,#ff0a0a 19%,#ff2828 40%,#000000 41%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

【讨论】：

以上是关于我有一个大div,里面有很多个小div,大div设置了滚动条，我想第一个小div不受滚动条影响,始终显示.的主要内容，如果未能解决你的问题，请参考以下文章

单击时多次更改 Div 背景颜色（循环）

谁知道div 布局大框架宽度高度根据啥设置不同的浏览器怎么设？

div 布局大框架宽度高度根据啥设置不同的浏览器怎么设？

div+css 怎么让一个小div在另一个大div里面垂直居中

div+css 让一个小div在另一个大div里面垂直居中

转：div+css 怎么让一个小div在另一个大div里面垂直居中