html - 使图像出现在 div 之上

Question

我正在尝试使图像出现在父 div 之外，这样图像看起来就好像位于 div 上而不增加父 div 的高度。但是，无论我尝试过什么，图像都会被父 div 截断并且不会显示所有内容。

我有一个 js fiddle 设置，希望能解释我正在尝试做的事情。

https://jsfiddle.net/h7esvfsr/

#navWrap{
    float: right; 
    overflow-x: visible;
    overflow-y: visible;
    height: 50px;
}
#navLogo{
    float: left;
}
#navLogo img{
    width: 200px;
}

下面的片段:

.gridContainer {
  width: 89.0217%;
  max-width: 1232px;
  padding-left: 0.4891%;
  padding-right: 0.4891%;
  margin: auto;
}
#navWrap {
  float: right;
  overflow-x: visible;
  overflow-y: visible;
  height: 50px;
}
#navLogo {
  float: left;
  height: 100px;
}
#navLogo img {
  width: 200px;
}
#LayoutDiv1 {
  clear: both;
  float: left;
  display: block;
  position: absolute;
  width: 400px;
  height: 400px;
  left: 50%;
  top: 45%;
  margin-left: -200px;
  /* half of the width  */
  margin-top: -50px;
  /* half of the height */
  ;
}
.menu {
  list-style-type: none;
  margin: auto;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  font-family: 'Archivo Black', sans-serif;
  opacity: 0.7;
}
/* Remove margins and padding from the list, and add a black background color */

ul.topnav {
  list-style-type: none;
  margin: auto;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  font-family: 'Archivo Black', sans-serif;
  opacity: 0.7;
}
/* Float the list items side by side */

ul.topnav li {
  float: left
}
/* Style the links inside the list items */

ul.topnav li a {
  display: inline-block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  transition: 0.3s;
  font-size: 17px;
}
/* Change background color of links on hover */

ul.topnav li a:hover {
  background-color: #269C1E;
}
/* Hide the list item that contains the link that should open and close the topnav on small screens */

ul.topnav li.icon {
  display: none;
}

<div class="menu">
  <div id="nav-anchor"></div>
  <nav class="gridContainer clearfix" id="nav">
    <div id="navWrap">
      <div id="navLogo">
        <img src="http://graphxnation.com/gxn_logo_large.png" alt="" />
      </div>
      <ul class="topnav" id="myTopnav">
        <li><a href="#home">Home</a>
        </li>
        <li><a href="about.html">About Us</a>
        </li>
        <li><a href="products.html">Products</a>
        </li>
        <li><a href="services.html">Services</a>
        </li>
      </ul>
    </div>
  </nav>
</div>

Answer 1

您可以绝对定位图像:

1. 添加 width: 200px - 与 navLogo

相同的图像

2. 将 position: absolute 添加到 navLogo img(您现在可以使用 left 和 top 调整位置>)

3. 使用 overflow: hidden 清除 float 到 navLogo、navWrap 和 gridContainer 并将其从 menu

中移除

4. 添加position: relative到menu

请参阅下面的演示 - 添加了一个 section 来模拟标题导航下方内容的滚动:

.gridContainer {
  width: 89.0217%;
  max-width: 1232px;
  padding-left: 0.4891%;
  padding-right: 0.4891%;
  margin: auto;
  overflow: hidden;
}
#navWrap {
  float: right;
  overflow: hidden;
  height: 50px;
}
#navLogo {
  float: left;
  height: 100px;
  width: 200px;
  overflow: hidden;
}
#navLogo img {
  width: 200px;
  position: absolute;
  left: 10px;
  top: 0;
}
#LayoutDiv1 {
  clear: both;
  float: left;
  display: block;
  position: absolute;
  width: 400px;
  height: 400px;
  left: 50%;
  top: 45%;
  margin-left: -200px;
  /* half of the width  */
  margin-top: -50px;
  /* half of the height */
  ;
}
.menu {
  list-style-type: none;
  margin: auto;
  padding: 0;
  /*overflow: hidden;*/
  background-color: #333;
  font-family: 'Archivo Black', sans-serif;
  opacity: 0.7;
  position: relative;
}
/* Remove margins and padding from the list, and add a black background color */

ul.topnav {
  list-style-type: none;
  margin: auto;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  font-family: 'Archivo Black', sans-serif;
  opacity: 0.7;
}
/* Float the list items side by side */

ul.topnav li {
  float: left
}
/* Style the links inside the list items */

ul.topnav li a {
  display: inline-block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  transition: 0.3s;
  font-size: 17px;
}
/* Change background color of links on hover */

ul.topnav li a:hover {
  background-color: #269C1E;
}
/* Hide the list item that contains the link that should open and close the topnav on small screens */

ul.topnav li.icon {
  display: none;
}
section {
  height: 150vh;
}

<div class="menu">
  <div id="nav-anchor"></div>
  <nav class="gridContainer clearfix" id="nav">
    <div id="navWrap">
      <div id="navLogo">
        <img src="http://graphxnation.com/gxn_logo_large.png" alt="" />
      </div>
      <ul class="topnav" id="myTopnav">
        <li><a href="#home">Home</a>
        </li>
        <li><a href="about.html">About Us</a>
        </li>
        <li><a href="products.html">Products</a>
        </li>
        <li><a href="services.html">Services</a>
        </li>
      </ul>
    </div>
  </nav>
</div>
<section></section>