时间戳

首页 > 解决方案 > 我的浮动元素干扰了其他元素

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

问题描述

我的全新 html 和 css 网站有问题：我希望在悬停在其自身的浮动元素上时打开一个。问题不在于动画，而在于布局。当它为空时，它运行良好，但是当我将内容添加到 中时，它位于浮动元素下方。为了解决这个问题，我尝试了不同的溢出值，如此处所述，但当然，whitch 的“外部”部分受到了影响。
（在此示例中，“菜单”已打开）

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%。有没有办法做到这一点 ？先感谢您....

标签： htmlcsscss-float

解决方案

而不是浮动使用绝对位置：

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>

推荐阅读