内嵌块元素定位有一个固定的和另一个相对的

Question

我正在尝试将两个inline-block元素放置在左侧#faqBlock保持位置fixed的位置，然后#blueBox位于relative。此基本功能在代码段中有效，但containerRight已超越containerLeft。

如果inline-block定位固定，我如何控制容器宽度和#faqBlock显示？

＆＃13;

＆＃13;

#page-wrap {
  margin-top: 70px;
  max-width: 100%;
}

#containerLeft,
#containerRight {
  display: inline-block;
  vertical-align: top;
  box-sizing: border-box;
  height: 200vh;
}


/*-- Container Left --*/

#containerLeft {
  width: 40%;
  position: fixed;
}

#faqBlock {
  width: 70%;
  height: 75vh;
  margin: 50px auto;
  display: block;
  background: #b82222;
  box-shadow: 10px 5px 5px rgba(0, 0, 0, 0.12);
}

#blueBlock {
  width: 70%;
  height: 75vh;
  margin: 50px auto;
  display: block;
  background: blue;
  box-shadow: 10px 5px 5px rgba(0, 0, 0, 0.12);
}


/*-- Container Right --*/

#containerRight {
  width: 60%;
  position: relative;
}

＆＃13;

<div id="page-wrap">
  <div id="containerLeft">
    <div id="faqBlock">
      gfsag
    </div>
  </div>
  <div id="containerRight">
    <div id="blueBlock">
      gfsag
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

位置fixed的元素不在常规流中，因此它不会以您想象的方式占用空间。您可以将margin-left: 40%;（等于左侧容器的宽度）添加到右侧容器中，使其看起来像是容纳空间。

如果这不是你想要的，请告诉我！

#page-wrap {
	margin-top: 70px;
	max-width: 100%;
}
#containerLeft, #containerRight {
	display: inline-block;
	vertical-align: top;
	box-sizing: border-box;
  height: 200vh;
}
/*-- Container Left --*/
#containerLeft {
	width: 40%;
	position: fixed;
}
#faqBlock {
	width: 70%;
	height: 75vh;
	margin: 50px auto;
	display: block;
	background: #b82222;
	box-shadow: 10px 5px 5px rgba(0,0,0,0.12);
}
#blueBlock {
	width: 70%;
	height: 75vh;
	margin: 50px auto;
	display: block;
	background: blue;
	box-shadow: 10px 5px 5px rgba(0,0,0,0.12);
}
/*-- Container Right --*/
#containerRight {
	width: 60%;
	position: relative;
    margin-left: 40%;
}

<div id="page-wrap">
  <div id="containerLeft">
    <div id="faqBlock">
    gfsag
    </div>
  </div><div id="containerRight">
    <div id="blueBlock">
    gfsag
    </div>
  </div>
</div>

Answer 2

您需要为left:40%分配containerRight，因为它已定位relative

由于您的固定容器宽度为40%。

#page-wrap {
  margin-top: 70px;
  max-width: 100%;
  border: 1px solid;
}

#containerLeft,
#containerRight {
  vertical-align: top;
  box-sizing: border-box;
  height: 200vh;
  border: 2px solid red;
}


/*-- Container Left --*/

#containerLeft {
  width: 40%;
  position: fixed;
}

#faqBlock {
  width: 70%;
  height: 75vh;
  margin: 50px auto;
  display: block;
  background: #b82222;
  box-shadow: 10px 5px 5px rgba(0, 0, 0, 0.12);
}

#blueBlock {
  width: 70%;
  height: 75vh;
  margin: 50px auto;
  display: block;
  border: 2px solid orange;
  background: blue;
  box-shadow: 10px 5px 5px rgba(0, 0, 0, 0.12);
}


/*-- Container Right --*/

#containerRight {
  left: 40%;
  width: 60%;
  position: relative;
}

<div id="page-wrap">
  <div id="containerLeft">
    <div id="faqBlock">
      gfsag
    </div>
  </div>
  <div id="containerRight">
    <div id="blueBlock">
      gfsag
    </div>
  </div>
</div>