Question

我对全新的html＆css网站有问题：我希望悬停在其自身的浮动元素上时会打开一个。问题不在于动画，而在于布局。当它为空时，它可以很好地工作，但是当我向中添加内容时，它会在float元素下。为了解决这个问题，我尝试按照here的说明尝试使用不同的溢出值，但是，抽动的一部分当然在其“外部”受到影响。
（在此示例中，“菜单”已经打开）

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>

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

1 个答案: