CSSの絶対と相対

私は1つの外側divと2つのchildren divを持っています。私は外側のdivをウィンドウに固定したいと思います。子divは親divのほとんどの部分に、別の子divは親divの最も右の部分にします。CSSの絶対と相対

親の場合、ウィンドウには固定されていますが、2つの子divが左に張り付いて重なっています。私がposition: relativeという親を持つ場合、2つの子divはそれぞれ左と右に固執しますが、ウィンドウの上部には固定されません。

どうすればいいですか？ありがとう！

<div class="nav-wrapper"> 
<div class="child1"></div> 
<div class="nav-pages"></div> 
</div>

マイCSS：

nav { 
@media only screen and (min-width: 0) { 
height: 3em; 
.nav-wrapper { 
    padding: .7em 1em 0 1em; 
} 
} 
@media only screen and (min-width: $medium-screen) { 
height: 500px; 
.nav-wrapper { 
    padding: 0em 1em 0 1em; 
    height: 64px; 
    position: relative; 
    background-color: rgba(60,63,65,0.22); 
    } 
} 
} 

nav { 
background-image: url("http://image.insider-journeys.com/overview/china.jpg"); 
background-size: cover; 
} 

.navbar-non-link { 
    padding: 0 15px; 
} 

.nav-pages { 
    padding-right: 0px; 
} 

.side-nav { 
    width: 500px; 
}

出典

2017-07-16 Chit Siu

あなたが尋ねていることをよりよく理解できるように、試したCSSを追加してください。 –

@AlexanderHiggins .css添付 –

はこれを試してみてください。

body { 
 
    height: 1200px; 
 
} 
 
.parent { 
 
    position: fixed; 
 
    background-color: red; 
 
    height: 100px; 
 
    width:100%; 
 
} 
 

 
.child1 { 
 
    background-color: green; 
 
    width: 100px; 
 
    height: 100px; 
 
    position: absolute; 
 
    left: 0; 
 

 
} 
 

 
.child2{ 
 
    background-color: blue; 
 
    width: 100px; 
 
    height: 100px; 
 
    position: absolute; 
 
    right: 0; 
 
}

<div class="parent"> 
 
<div class="child1"></div> 
 
<div class="child2"></div> 
 
</div>

出典

2017-07-16 07:09:09 Ehsan

ありがとうございました!!! –

@ChitSiu、よろしいですか？ – Ehsan

このような何か：

body { 
 
    width: 100%; 
 
    min-height: 1000px; 
 
    margin:0px; 
 
    padding:0px; 
 
} 
 
div {margin:0px;padding:0px;} 
 
.wrapper { 
 
    border: 1px solid black; 
 
    width: 100%; 
 
    position: fixed; 
 
    height:50px; 
 
    top:0px; 
 
} 
 

 
.parent { 
 
    position: fixed; 
 
    width: 20%; 
 
    height: 50px; 
 
    background: red; 
 
    overflow:hidden; 
 
    top:1px; 
 
    right:40%; 
 
} 
 

 
.child1 { 
 
    position: fixed; 
 
    left: 20%; 
 
    top: 1px; 
 
    height: 50px; 
 
    width:20%; 
 
    background: green 
 
} 
 

 
.child2 { 
 
    position: fixed; 
 
    right: 20%; 
 
    top: 1px; 
 
    height: 50px; 
 
    width: 20%; 
 
    background: green 
 
}

<body> 
 
    <div class="wrapper"> 
 
    <div class="parent">parent 
 
     <div class="child1">child1</div> 
 
     <div class="child2">child2</div> 
 
    </div> 
 
    </div> 
 
</body>

出典

2017-07-16 07:04:48

答えて

関連する問題