在父级两侧向外设置绝对定位div

Question

我有这样的结构：

.sectors-column-right {
  float: right;
  width: 800px;
  height: 796px;
  position: relative;
}
.sectors-modal {
  background: #fff;
  width: 764px;
  height: 500px;
  position: absolute;
  top: 58px;
  right: 18px;
  z-index: 1111;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

<div class="sectors-column-right">
  <div class="sectors-column">
  </div>
  <div class="sectors-column">
  </div>
  <div class="sectors-modal">
  </div>
</div>

如何使.sectors-modal向外（同时在两侧）制作动画，例如点击？我可以只使用CSS，还是需要JavaScript？

Answer 1

• 删除.selectors-modal

上的宽度

• 在left: 0上放置right: 0和.selectors-modal（或正值，如果你想要一个间隙）来拉伸它

• 给.selectors-modal一个合适的transition

• 在悬停时（或使用jQuery单击）更改否定的左右值。过渡提供了流畅的动画。

确保有扩展空间。我在这个示例中使用父项left: -200px创建了空格。

示例 - 悬停

.sectors-column-right {
  float: right;
  width: 200px;
  height: 796px;
  position: relative;
  background: #F00;
  left: -200px;
}
.sectors-modal {
  background: #fff;
  height: 500px;
  position: absolute;
  top: 58px;
  left: 10px;
  right: 10px;
  z-index: 2;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  transition: all 1s;
}
.sectors-modal:hover {
  right: -200px;
  left: -200px;
  }

<div class="sectors-column-right">
  <div class="sectors-column">
  </div>
  <div class="sectors-column">
  </div>
  <div class="sectors-modal">
  </div>
</div>

示例 - 单击（使用jQuery）

$( ".sectors-modal" ).click(function() {
  $( this ).toggleClass( "expanded" );
});

.sectors-column-right {
  float: right;
  width: 200px;
  height: 796px;
  position: relative;
  background: #F00;
  left: -200px;
}
.sectors-modal {
  background: #fff;
  height: 500px;
  position: absolute;
  top: 58px;
  left: 10px;
  right: 10px;
  z-index: 2;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  transition: all 1s;
}
.expanded {
  right: -200px;
  left: -200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sectors-column-right">
  <div class="sectors-column">
  </div>
  <div class="sectors-column">
  </div>
  <div class="sectors-modal">
  </div>
</div>

Answer 2

从父级移除position:relative，然后position:absolute div将获取定位的值（left,右) from the文档`

＆＃13;

＆＃13;

.sectors-column-right {
  float: right;
  width: 800px;
  height: 796px;
  border: 1px solid red;
}
.sectors-modal {
  background: #fff;
  background: grey;
  height: 500px;
  position: absolute;
  top: 58px;
  right: 1px;
  left: 1px;
  z-index: 1111;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

＆＃13;

<div class="sectors-column-right">
  <div class="sectors-column"></div>
  <div class="sectors-column"></div>
  <div class="sectors-modal">width</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

＆＃13;

＆＃13;

.sectors-column-right { position: relative; width: 100%; }
.sectors-modal{ width: auto; margin-left: 160px; border: 1px solid #000; }
.sectors-column{ width: 145px; position: absolute; top: 0px; bottom: 0px; border: 1px solid #F00; }

＆＃13;

<div class="sectors-column-right">
    <div class="sectors-column">
    </div>
    <div class="sectors-column">
    </div>
    <div class="sectors-modal"></div>
</div>

＆＃13;

＆＃13;

＆＃13;