I am attempting to position an image outside of its parent div in such a way that it appears to be sitting on top of the div without affecting the height of the parent. However, no matter what I attempt, the image consistently gets clipped by the parent div and does not display correctly.
I have set up a jsFiddle to better illustrate the issue:
#navWrap{
float: right;
overflow-x: visible;
overflow-y: visible;
height: 50px;
}
#navLogo{
float: left;
}
#navLogo img{
width: 200px;
}
Snippet below:
.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>