Question

我试图让图像显示在父div之外，因此看起来图像位于div上而不会增加父div的高度。但是，无论我尝试过什么图像，都会被父级div切断，并且不会显示所有内容。

我有一个js小提琴设置，希望能解释我想要做的事情。

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

以下片段：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 1

你可以定位图像绝对：

添加width: 200px - 与navLogo
相同的图片
将position: absolute添加到navLogo img（您现在可以使用left和top调整位置
使用float至overflow: hidden，navLogo和navWrap清除gridContainer并将其从menu
将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>

使图像显示在div的顶部

1 个答案: