Question

我有一个外部div和两个子div。我希望外部div固定在窗口上，一个子div占据父div的最左边，另一个子div占父div的最右边。

当我position: fixed父母时，它固定在窗口上，但是两个子div粘在左边并重叠。如果我position: relative为父，则两个子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;
}

Answer 1

这样的事情：

＆＃13;

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
}

＆＃13;

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

＆＃13;

Answer 2

试试这个：

＆＃13;

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;
}

＆＃13;

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

＆＃13;

CSS位置绝对和相对

2 个答案: