Question

我有3个部分。一个是Navbar，第二个是div，它是bg，基本上是条纹背景，第三个是我在div中的内容（标题，信息框等）

当我放置导航栏时，它将我的所有内容推向右侧，因为它是一个新的div，无法弄清楚如何修复它，

通常这是一个简单的修复，也许我有一个艰难的一天，无法弄清楚一段简单的代码。有人能详细说明我做错了什么吗？

<div class="nav">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Download</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>

    <div class="stripes">
        <span></span>
        <span></span> 
        <span></span> 
        <span></span> 
    </div>

<section id="header">
    <div class="container">
        <div class="header-content">
           <div class="header-header">
                <h1>Lorem Ipsum</h1>    
           </div>
            <div class="header-info">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae assumenda quas tempora totam qui soluta illum dolorem impedit ad, ratione, aspernatur ipsa placeat adipisci molestias id tenetur natus voluptates quis.</p>
            </div>
        </div>
    </div>
</section>
</header>
</body>
</html>

SASS

$mainBlue: #3CB6FD
$secondBlue: #4A5AFC

html
    height: 100% !important
    font-family: 'Open Sans', sans-serif !important
    -webkit-font-smoothing: antialiased !important
    text-rendering: optimizeLegibility !important

.gridContainer
    display: grid
    grid-template-columns: 100%
    grid-template-areas: "header"

header
    position: relative !important
    display: flex !important

#header
    position: relative
    z-index: 3
    height: 780px
    grid-area: header
    align-items: center
    justify-content: center
    display: flex

.nav
    position: relative
    z-index: 999
    height: auto

    ul
        list-style-type: none

        li
            display: inline-block

            a
                color: white
                text-decoration: none
                display: block
                padding: 1em


.header-content
    margin: 0 auto
    max-width: 60%

.phone-container
    position: absolute
    bottom: 0
    right: 0
    height: 100%
    width: 30%
    display: block
    transform: rotate(-10deg)

.phone
    height: 100%
    width: 100%
    display: block
    background: url(../img/phone.png)
    background-size: contain
    background-repeat: no-repeat
    z-index: 6

.container
    width: 950px
    margin: 0 auto

header .stripes
    background: linear-gradient(to left, $mainBlue , $secondBlue)
    display: block
    height: 100%
    position: absolute
    transform: skewY(-12deg)
    width: 100%
    overflow: hidden
    transform-origin: 0

span
    display: block
    position: absolute
    &:first-child
        background: linear-gradient(to left, $mainBlue , $secondBlue)
        top: 0
        left: 0
        width: 40%
        height: 200px
    &:nth-child(2)
        background: linear-gradient(to left, $mainBlue , $secondBlue)
        bottom: 0
        height: 200px
        width: 50%
        z-index: 2
    &:nth-child(3)
        background: linear-gradient(to left, $mainBlue , $secondBlue)
        bottom: 200px
        height: 130px
        width: 33%
    &:nth-child(4)
        background: linear-gradient(to left, $mainBlue , $secondBlue)
        right: 0
        height: 230px
        width: 53%
        bottom: 0

.header-header
    margin-bottom: 30px

h1
    font-size: 3em
    font-weight: 700
    color: white

p
    font-size: 1em
    font-weight: 400
    color: white
    line-height: 2

Answer 1

为什么在display: flex !important使用header？删除它，您的内容将恢复正常。如果您希望条纹向上移动，那么您可以在top: -10px类中使用header .stripes

演示：https://codepen.io/nlshnk95/pen/mKRwMK

为什么我的Navbar将我的整体内容推到一边？

1 个答案: