Question

请看以下小提琴： https://jsfiddle.net/a9ravkf5/3/

＆＃13;

#navbar{
  position: fixed;
  top: 0;
  left: 0;
  height:40px;
  background-color: grey;
  width: 100%;
}
#sidebar{
  position: fixed;
  top: 40px;
  left: 0;
  z-index: 0;
  height:100%;
  width: 200px;
  background-color: black;
}

#dropdown{
  position: absolute;
  top: 0px;
  left 0px;
  width: 500px;
  color: #fff;
  z-index: 10;
  padding-left: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: blue;
  
}

#content{
  position: absolute;
  top: 40px;
  left: 200px;
  right: 0px;
  min-height: 300px;
  background-color: green;
}

＆＃13;

<div id="navbar">
</div>

<div id="sidebar">
  <div id="dropdown">
  This is a very long sentance that should be visible in its entirety.
  </div>
</div>

<div id="content">
</div>

＆＃13;

我想使蓝色元素比固定位置父元素更大（更宽）。这将是在侧边栏中选择选项的下拉菜单，我希望它扩展内部的内容而不是换行到多行（更大的高度）。

这样做的最佳解决方案是什么？

Answer 1

您的子div大于包含的固定div。您无法看到所有内容的原因是因为您的#content div显示在固定的#sidebar div前面。

尝试向#sidebar和#content div添加z-index，如下所示：

#sidebar {
  position: fixed;
  top: 40px;
  left: 0;
  z-index: 0;
  height: 100%;
  width: 200px;
  background-color: black;
  z-index: 2; // Here we give the sidebar a larger z-index resulting in it being showed on top of the content.
}

#content {
  position: absolute;
  top: 40px;
  left: 200px;
  right: 0px;
  min-height: 300px;
  background-color: green;
  z-index: 1; // Here we give the content a lower z-index resulting in it being showed beneath the sidebar.
}

#navbar {
  position: fixed;
  top: 0;
  left: 0;
  height: 40px;
  background-color: grey;
  width: 100%;
}

#dropdown {
  position: absolute;
  top: 0px;
  left 0px;
  width: 500px;
  color: #fff;
  z-index: 10;
  padding-left: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: blue;
}

<div id="navbar"></div>
<div id="sidebar">
  <div id="dropdown">
    This is a very long sentance that should be visible in its entirety.
  </div>
</div>
<div id="content"></div>

Answer 2

这是你需要的吗？您需要在内容div和侧边栏上设置适当的z-index。

#navbar{
  position: fixed;
  top: 0;
  left: 0;
  height:40px;
  background-color: grey;
  width: 100%;
}
#sidebar{
  position: fixed;
  top: 40px;
  left: 0;
  z-index: 10;
  height:100%;
  width: 200px;
  background-color: black;
}

#dropdown{
  position: absolute;
  top: 0px;
  left 0px;
  width: 500px;
  color: #fff;
  z-index: 10;
  padding-left: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: blue;
  
}

#content{
  position: absolute;
  top: 40px;
  left: 200px;
  right: 0px;
  z-index: 0;
  min-height: 300px;
  background-color: green;
}

<div id="navbar">
</div>
<div id="sidebar">
  <div id="dropdown">
  This is a very long sentance that should be visible in its entirety.
  </div>
</div>

<div id="content">

</div>

Answer 3

你需要设置两件事一个是你的＆＃39; z-index＆＃39;，在#sidebar中。而另一个是“最小高度”在#content。

像

INCLUDE Irvine32.inc
.code
main PROC
.REPEAT
mov edx, OFFSET fPrompt ;display a prompt
call WriteString
call ReadInt ;recordes users number
mov var1, eax           ;gives var1 the users number
.IF var1 == -1       ;jumps to L3 if the user want's to quit
jmp L3
.ENDIF
call IsPrime       ;calls the IsPrime procedure
L3:
.UNTIL var1 == -1       ;jumps up to repeat if var1 != -1
ret
main ENDP
mov ebx, 2   ; sets minimum divisor
mov eax, var1 ; set dividend
cdq ; converts to 64-bit edx:eax
mov ecx, ebx ; stores divisor in ecx
div ecx ; Proformes division
mov b, eax   ; Gets remainder, b is half var2
.WHILE ebx != b   ;loops until ebx has reached var1/2
mov eax, var1 ; set dividend
cdq ; converts to 64-bit edx:eax
mov ecx, ebx ; stores divisor in ecx
div ecx ; Proformes division
mov a, edx   ; Gets remainder
.IF a == 0 ;if there was no remainder, then var1 is not prime
jmp L1       ;jumps out of the loop if above is correct
.ENDIF
inc ebx       ;increments until ebx reaches b
.ENDW
mov edx, OFFSET pPrompt   ;tells the user their number was prime
call WriteString
jmp L2
L1:
mov edx, OFFSET cPrompt ;tells the user their number was not prime
call WriteString
L2: ret
IsPrime ENDP
END main

如果你想修复它，那么还要添加z-index：-1;在#content

中

使子div大于固定位置父div

3 个答案: