::之後將不會堆疊元素

我需要灰色的垂直線在「最新工作」的作品下面。當我將z-索引設置爲負數但它消失時，我假設它位於身體下方？希望這是一個簡單的解決方案。我附上我的模型的圖像，以顯示它應該是什麼樣子。我有一個背景爲＃212121的div，所以副本「最新作品」在上面和下面填充，使其看起來像下面的線。::之後將不會堆疊元素

body { 
 
\t font-size: 16px; 
 
\t background: #f9f9f9; 
 
} 
 
.container { 
 
\t max-width: 1600px; 
 
} 
 

 
#dt-lpStatic { 
 
\t height:60px; 
 
\t width: 100%; 
 
\t padding:6px 0; 
 
\t font-family: 'Montserrat', sans-serif; 
 
\t font-size: 0.875em; 
 
\t text-transform: uppercase; 
 
} 
 
#dt-lpStatic ul { 
 
\t float: left; 
 
\t margin-top: 3px; 
 
} 
 
#dt-lpStatic ul li { 
 
\t display: inline; 
 
\t color:#545454; 
 
\t margin-left:40px; 
 
} 
 
#dt-lpStatic ul li:nth-child(1) { 
 
\t margin-left:0; 
 
} 
 
.subscribe-btn-muted { 
 
\t padding:12px 50px; 
 
\t border:2px solid #555; 
 
\t border-radius: 13%/50%; 
 
\t \t -webkit-border-radius: 13%/50%; 
 
\t \t -moz-border-radius: 13%/50%; 
 
\t float:right; 
 
\t color:#555; 
 
} 
 
#hero { 
 
\t width:100%; 
 
\t background: #212121; 
 
\t height:100vh; 
 
} 
 
#hero-content { 
 
\t margin:30vh auto; 
 
\t text-align: center; 
 
} 
 
#hero .secTitle-bg-dark { 
 
\t width:200px; 
 
\t padding: 15px 0; 
 
\t font-family: 'Open Sans', sans-serif; 
 
\t font-style: italic; 
 
\t color: #555; 
 
\t font-size: 1.5em; 
 
\t font-weight: 300; 
 
\t margin:30vh auto; 
 
\t background: #212121; 
 
} 
 
.secTitle-bg-dark:after { 
 
    content:""; 
 
    position: absolute; 
 
    z-index: 0; 
 
    top: 65vh; 
 
    bottom: 0; 
 
    left: 50%; 
 
    border-left: 2px solid #313131; 
 
}

<body> 
 
\t <section id="hero"> 
 
\t \t <header id="dt-lpStatic"> 
 
\t \t \t <div class="container"> 
 
\t \t \t \t <ul> 
 
\t \t \t \t \t <li><img src="imgs/logo-muted.png" alt="RH logo"></li> 
 
\t \t \t \t \t <li>Home</li> 
 
\t \t \t \t \t <li>Blog</li> 
 
\t \t \t \t \t <li>About</li> 
 
\t \t \t \t \t <li>Get In Touch</li> 
 
\t \t \t \t </ul> 
 
\t \t \t \t <div class="subscribe-btn-muted">Subscribe</div> 
 
\t \t \t </div> 
 
\t \t </header> 
 
\t \t <div id="hero-content"> 
 
\t \t \t <img src="imgs/logo-full-big.png" alt="RH Visual Design logo"> 
 
\t \t \t <div class="secTitle-bg-dark">latest work</div> 
 
\t \t </div> 
 
\t </section> 
 
</body>

來源

2016-07-25 user1607991

這實際上是flexbox的絕佳選擇。你能夠通過這樣簡化代碼很多：

編輯：只是一個友情提示：僞元素應該::爲前綴，像::before和::after。僞選擇符只有一個冒號，如a:hover和input:focus。

body { 
 
    background-color: #333; 
 
} 
 

 
.latest-work { 
 
    color: #999; 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: center; 
 
} 
 

 
.latest-work span { 
 
    display: block; 
 
    padding: 10px 0; 
 
} 
 

 
.latest-work::before, 
 
.latest-work::after { 
 
    width: 1px; 
 
    height: 100px; 
 
    content: ''; 
 
    background-color: #999; 
 
}

<div class="latest-work"> 
 
    <span>latest work</span> 
 
</div>

來源

2016-07-25 23:35:46 ratherblue

我從來沒有使用過flexbox，但是這是一個不錯的選擇？我認爲它用於網格？道歉，我仍然是一個nube。感謝@ratherblue！ – user1607991

好的，當我單獨執行代碼時，我得到了這個工作，但是當我嘗試使它與我的代碼一起工作時，它又會消失......我想我需要查看我正在做的事情是如何搞砸的。但是非常感謝！我看到flexbox確實比我想象的要多... \ _ [-_-] _/ – user1607991

這是一個很好的選擇，因爲您希望垂直線與「最新作品」的文字完美集中。由於':: before'和':: after'是僞元素，因此您可以像普通元素一樣操作它們，並且它們屬於flexbox規則。在我上面輸入的代碼中，元素是垂直堆疊的，因爲我做了'flex-direction：column'。另外，如果您使用flexbox，則需要針對safari和IE 11的這些樣式的供應商前綴。有許多在線工具可以幫助您執行此操作：https：// autoprefixer。 github.io/ – ratherblue

添加display: block;到:after元件 - 僞構件需要此塊佈局。

來源

2016-07-25 23:33:25 Toby

好吧，我這樣做，但它仍然不允許我放線的元件下面？ – user1607991

你正在使用'position：absolute;'這將絕對地定位元素..你爲什麼使用它？ Tbh我會遵循上面的答案，它更全面（儘管不是要求他解釋Flexbox，你應該先谷歌它，並先做一些閱讀）。 – Toby

對...感謝！我用絕對，因爲我試圖堆疊它。 – user1607991

::之後將不會堆疊元素

回答

相關問題