Javascript 如何相对于父div修复div？_Javascript_Html_Css

Javascript 如何相对于父div修复div？

javascript html css

Javascript 如何相对于父div修复div？,javascript,html,css,Javascript,Html,Css,我有父div和7个子div，我希望两个div固定到父div的极端，不相对于父div移动，而是与父div一起移动（这意味着如果我更改主体的填充，则div的排列应保持不变）。5个div的其余部分在父div中沿x方向滚动但问题是，在我的代码中，fixdiv保持固定到window或与其他div一起滚动这是我的名片 html: 您可以将.list元素包装在容器中，并为控件添加额外的div。将控件的额外div的位置规则设置为relative，这样可以使控件按钮保持绝对位置。包含的控件不必是列表本身的子控

我有父div和7个子div，我希望两个div固定到父div的极端，不相对于父div移动，而是与父div一起移动（这意味着如果我更改主体的填充，则div的排列应保持不变）。5个div的其余部分在父div中沿x方向滚动

但问题是，在我的代码中，fixdiv保持固定到window或与其他div一起滚动

这是我的名片

html:

您可以将

.list

元素包装在容器中，并为控件添加额外的div。将控件的额外div的位置规则设置为

relative

，这样可以使控件按钮保持绝对位置。包含的控件不必是列表本身的子控件

这里有一个例子

正文{
利润上限：200px；
}
.名单{
宽度：1100px；
高度：400px；
保证金：0自动；
溢出-x：滚动；
溢出y：隐藏；
空白：nowrap；
位置：相对位置；
}
.控制{
位置：相对位置；
宽度：100%；
z指数：+1；
}
.按钮{
显示：表格；
顶部：150px；
宽度：50px；
高度：100px；
背景色：rgba（100100200,0.8）；
位置：绝对位置；
/*位置：固定*/
}
.按钮左{
左：计算（50%-550px）；
边界半径：0 20px 20px 0；
}
.按钮右{
右：计算（50%-550px）；
边界半径：20px 0 0 20px；
}
.卡片{
显示：内联块；
高度：360px；
宽度：250px；
利润率：20px 10px；
边界半径：10px；
背景色：#505050；
}
@媒体屏幕和屏幕（最大宽度：1100px）{
.按钮左{
左：0；
}
.按钮右{
右：计算（100%-1100px）；
}
}

所有

.cards

div都应该是另一个div的子级，这里我添加了一个

.cardcontainer

div，这样父级div应该有3个子级、2个按钮和

card container

。另外，需要使用

中的显示：-webkit框

另外，我已经将.cardcontainer的宽度设置为90%`，您可以相应地对其进行更改
滚动
css应该在.cardcontainer
div中，而不是在列表
div中

.cardcontainer{
位置：相对位置；
溢出-x：自动；
保证金：0自动；
宽度：90%；
显示：-网络工具包盒；
}
.名单{
宽度：100%；
位置：相对位置；
}
.按钮{
顶部：150px；
宽度：50px；
高度：100px；
背景色：rgba（100100200,0.8）；
位置：绝对位置；
z指数：1；
}
.按钮左{
左：0；
边界半径：0 20px 20px 0；
}
.按钮右{
右：0；
边界半径：20px 0 0 20px；
}
.卡片{
/*显示：内联块*/
高度：360px；
宽度：250px；
利润率：20px 10px；
边界半径：10px；
背景色：#505050；
}
@媒体屏幕和屏幕（最大宽度：1100px）{
.按钮左{
左：0；
}
.按钮右{
右：0；
}
}
对div使用position并设置它。但是它不起作用，（margin:0 auto；）停止对父div的工作。
<!DOCTYPE html>
<html>
<head>
    <title>test6</title>
    <link rel="stylesheet" type="text/css" href="test6.css">
</head>
<body>
<div class="list">
    <div class="button button-left"></div>
    <div class="button button-right"></div>
    <div class="card">      
    </div>
    <div class="card">      
    </div>
    <div class="card">      
    </div>
    <div class="card">      
    </div>
    <div class="card">      
    </div>
</div>
</body>
</html>

body{
    margin-top: 200px;

}
.list{
    width: 1100px;
    height: 400px;
    margin: 0 auto;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    position: relative;

}
.button{
    display: table;
    top: 150px;
    width: 50px;
    height: 100px;
    background-color: rgba(100, 100, 200, 0.8);
        position: absolute;
        /*position: fixed;*/
}
.button-left{
    left: calc(50% - 550px);
    border-radius: 0 20px 20px 0 ;
}
.button-right{
    right: calc(50% - 550px);
    border-radius: 20px 0 0 20px;
}
.card{
    display: inline-block;
    height: 360px;
    width:250px;
    margin: 20px 10px;
    border-radius: 10px;
    background-color: #505050;
}
@media screen and (max-width: 1100px){
    .button-left{
        left: 0;
    }
    .button-right{
        right: calc(100% - 1100px);

    }
}