文本覆蓋文本並可擴展。

我剛剛回到Web開發，所以我正在努力再次伸展這些肌肉。我想要實現的是在垂直菜單的頂部添加一個標題，其中的縮寫位於後臺，並且全名位於這些縮寫的中間。我可以用codepen中的代碼做到這一點，但是在調整窗口大小時，它很快就會被破壞。我知道這部分是由於絕對的立場。是否有另一種方法可以實現這種效果，並且具有可擴展性，但保持在導航的範圍之內？文本覆蓋文本並可擴展。

http://codepen.io/anon/pen/OPPKmq

<html> 
<head> 
    <title>Scottish Arts</title> 
    <link rel="stylesheet" type="text/css" href="style.css"> 
</head> 

<body> 
<div id="body"> 
<aside> 

</aside> 

<nav> 
    <h1 id="navSA">SA<h1> 
    <h1 id="sa">Socttish Arts</h1> 
    <ul> 
     <li><h3></h3></li> 
     <li><a href=" ">Home</a></li> 
     <li><a href=" ">Scottish Arts</a></li> 
     <li><a href=" ">Bagpipes</a></li> 
     <li><a href=" ">Contact Us</a></li> 
    </ul> 
</nav> 


</div> 


</body> 
</html> 

html { 
    height: 100%; 
} 

body { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 

h1,h2,h3 { 
    padding: 0; 
    margin: 0; 
} 

#body { 
    display: flex; 
    height: 100%; 
} 

aside { 
    width: 25px; 
    height: 100%; 
    background: url("img/nhtar.gif"); 

    background-repeat: repeat; 
    border-right: 2px #000 solid; 

} 

nav { 
    height: 100%; 
    width: 15%; 
    background-color: #7E717A; 
    border-right: 4px #A2969E solid; 
    overflow: hidden; 
} 

nav #navSA { 
    font-weight: bolder; 
    text-align: center; 
    padding: 0; 
    margin: 0; 
    font-size: 8em; 
    color: #A2969E; 
} 

nav #sa { 
    padding: 0; 
    margin: 0; 
    position: absolute; 
    top: 60px; 
    left: 40px; 
    font-size: 2em; 
    text-shadow: 2px 2px #7E717A; 

} 

nav ul { 
    margin: 0; 
    padding: 0; 
} 

nav ul li { 
    list-style: none; 
    text-align: right; 
} 

nav ul li a { 
    display: block; 
    padding: 5px; 
    background-color: #A2969E; 
    text-decoration: none; 
    font-size: 1.5em; 
    font-family: "Verdana"; 
    font-weight: bold; 
    color: #fff; 
    border-bottom: 4px #7E717A solid; 
} 

nav ul li a:hover { 
    background-color: #372E34; 
}

來源

2014-11-23 SpaTTerManke

給予絕對位置不具有相對的父母孩子，會設置它的有關身體位置。在CSS 添加position:relative;到nav，一切都會好的;）

http://codepen.io/anon/pen/LEEwOd

來源

2014-11-23 13:50:19 tsepehr

有道理它會默認爲是，謝謝！ – SpaTTerManke 2014-11-23 14:38:56

文本覆蓋文本並可擴展。

回答

相關問題