我的浮动元素干扰了其他元素

Question

我的全新 html 和 css 网站有问题：我想要一个在悬停在其自身的浮动元素上时打开的网站。问题不在于动画，而在于布局。当它为空时，它运行良好，但是当我向中添加内容时，它位于浮动元素下方。为了解决这个问题，我已经按照 here 的解释尝试了不同的溢出值，但当然 whitch 的部分 "outside" 受到了影响。
（在此示例中，"menu" 已打开）

section
{
 background-color: white;
 margin: 10px;
}
.scroll_aside{
 overflow-y: auto;
 width: 100%;
 height: 100%;
}
.aside_left{
 width: 70%;
 height: 100%;
    display: block;
 background-color: gold;
 position: fixed;
 top:0;
}
.aside_left .cote{
 position: relative;
 top:0px;
 right: -80px;
 width: 80px;
 background-color: orange;
 margin-top: 100px;
 margin-left:0;
 float: right;
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="TEST2.css"/>
    </head>

    <body>
        <div class='aside_left'><span class='cote' onclick="openjourney()">Floating on the right</span>
            <div class="scroll_aside">
                <section style='height: 400px'>Section 1</section>
                <section style='height: 800px'>Section 2</section>
            </div>
        </div>
    </body>
</html>

我注意到的另一件事是，当内容足够薄时，它会到达顶部.... 但我想要的是让内容占据所有 , 因此位于顶部且宽度 = 100%。有没有办法做到这一点？提前谢谢你....

Answer 1

使用绝对位置代替浮动：

section {
  background-color: white;
  margin: 10px;
}

.scroll_aside {
  overflow-y: auto;
  width: 100%;
  height: 100%;
}

.aside_left {
  width: 70%;
  height: 100%;
  display: block;
  background-color: gold;
  position: fixed;
  top: 0;
}

.aside_left .cote {
  position: absolute;
  left: 100%;
  width: 80px;
  background-color: orange;
  top: 100px;
}

<div class='aside_left'><span class='cote' onclick="openjourney()">Floating on the right</span>
  <div class="scroll_aside">
    <section style='height: 400px'>Section 1</section>
    <section style='height: 800px'>Section 2</section>
  </div>
</div>

我的浮动元素干扰了其他元素

My floating element disturbs other elements

html

css

css-float