为什么大元素消失时，另一个元素中的元素不会消失？

问题描述：

function openNav() { 
 
    document.getElementById("mynav").style.width = "100vw"; 
 
} 
 
function closeNav() { 
 
    document.getElementById("mynav").style.width = "0vw"; 
 
}

html,body{ 
 
    height:100vh; 
 
    background:grey; 
 
    font-family: 'Special Elite', cursive; 
 
    display:flex; 
 
    align-items:center; 
 
    justify-content:center; 
 
    overflow:hidden; 
 
    } 
 
    .item{ 
 
    font-size:100px; 
 
    } 
 
    .nav{ 
 
    z-index:1; 
 
    height:100%; 
 
    width:0; 
 
    position:fixed; 
 
    top:0; 
 
    left:0; 
 
    background:#111; 
 
    transition: 0.5s; 
 
    } 
 
    .open{ 
 
    position:fixed; 
 
    left:0; 
 
    top:0; 
 
    padding:20px; 
 
    font-size:30px; 
 
    } 
 
    .open:hover{ 
 
    color:#f1f1f1; 
 
    } 
 
    .close{ 
 
    position:absolute; 
 
    top:0; 
 
    right:0; 
 
    padding:20px; 
 
    color:#818181; 
 
    font-size:60px; 
 
    } 
 
    .close:hover{ 
 
    color:#f1f1f1; 
 
    }

<link href="https://fonts.googleapis.com/css?family=Special+Elite" rel="stylesheet"> 
 

 
<div class='item'>G. Chen's Drawings</div> 
 

 
<div class='nav' id='mynav'> 
 
<a class="close" onclick="closeNav()">&times;</a> 
 
<img src="https://user-images.githubusercontent.com/24628125/31184132-90a37a5a-a8f6-11e7-89ba-4bc8ca7484d8.png" alt="horse eye" width="200" height="100"> 
 
</div> 
 

 
<span onclick="openNav()" class='open'>&#9776 Gallery</span>

马眼图像被阻挡的菜单按钮。但我把<img>放在侧面导航<div>之内。当左侧导航阻止左侧时，马眼只是停留在外，并不会出现。为什么？

您需要删除<img>才能看到打开侧导航菜单的按钮。您按下打开按钮，侧面导航栏出现。我希望马眼图像在侧面导航中。当sidenav关闭时，图像应该消失。

答

内部元件最大宽度您需要

overflow: hidden;

添加到您的样式.nav

否则溢出（超出声明宽度）将是可见的。

工作实例：

function openNav() { 
 
    document.getElementById("mynav").style.width = "100vw"; 
 
} 
 
function closeNav() { 
 
    document.getElementById("mynav").style.width = "0vw"; 
 
}

html,body{ 
 
    height:100vh; 
 
    background:grey; 
 
    font-family: 'Special Elite', cursive; 
 
    display:flex; 
 
    align-items:center; 
 
    justify-content:center; 
 
    overflow:hidden; 
 
    } 
 
    .item{ 
 
    font-size:100px; 
 
    } 
 
    .nav{ 
 
    z-index:1; 
 
    height:100%; 
 
    width:0; 
 
    position:fixed; 
 
    top:0; 
 
    left:0; 
 
    background:#111; 
 
    transition: 0.5s; 
 
    overflow: hidden; 
 
    } 
 
    .open{ 
 
    position:fixed; 
 
    left:0; 
 
    top:0; 
 
    padding:20px; 
 
    font-size:30px; 
 
    } 
 
    .open:hover{ 
 
    color:#f1f1f1; 
 
    } 
 
    .close{ 
 
    position:absolute; 
 
    top:0; 
 
    right:0; 
 
    padding:20px; 
 
    color:#818181; 
 
    font-size:60px; 
 
    } 
 
    .close:hover{ 
 
    color:#f1f1f1; 
 
    }

<link href="https://fonts.googleapis.com/css?family=Special+Elite" rel="stylesheet"> 
 

 
<div class='item'>G. Chen's Drawings</div> 
 

 
<div class='nav' id='mynav'> 
 
<a class="close" onclick="closeNav()">&times;</a> 
 
<img src="https://user-images.githubusercontent.com/24628125/31184132-90a37a5a-a8f6-11e7-89ba-4bc8ca7484d8.png" alt="horse eye" width="200" height="100"> 
 
</div> 
 

 
<span onclick="openNav()" class='open'>&#9776 Gallery</span>

答

给的100％

答

的nav不会消失，它只有width: 0，这使得它无形。但它仍然存在，并作为“眼睛”的父母。既然这个定位是绝对的，它也可以出现在它的父母的边界之外。

增加：

如果您的资产净值100像素宽（喜欢这里：https://codepen.io/anon/pen/mBqaYE?editors=1100），映入眼帘的是仍然存在在其全宽 - 出于同样的原因：绝对位置使其独立的边界的家长。

答

你不应该改变宽度。你应该改变的是导航的左侧位置。这是一个工作示例https://codepen.io/kingychiu/pen/MEOZMB。

JS：

function openNav() { 
     document.getElementById("mynav").style.left = "0px"; 
    } 

    function closeNav() { 
     document.getElementById("mynav").style.left = "-100vw"; 
    }

CSS：

.nav{ 
    z-index:1; 
    height:100%; 
    width:100vw; 
    position:fixed; 
    top:0; 
    left:-100vw; 
    background:#111; 
    transition: 0.5s; 
    }

为什么大元素消失时，另一个元素中的元素不会消失？

相关推荐