Question

有人可以帮助解决任何想法，如何在Container外部设计一个DIV？为了更好地理解，我发布了一个显示我的问题的图像。谢谢大家！

Answer 1

如果您使用位置absolute或fixed，内部div将在容器外，但是，您必须确保父不有position: relative否则它将无效。

＆＃13;

.container {
  background: lightblue;
  width: 70%;
  margin:0 auto;
  min-height: 300px;
}

.outside {
  position: absolute;
  top:0;
  left:0;
  background: red;
  padding: 1em;
}

＆＃13;

<div class="container">
  <div class="outside">im out</div>
</div>

＆＃13;

Answer 2

如果您希望其他内容正常流动，您也可以使用负边距来执行此操作：

例如： HTML：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>

<h1>streaming</h1>
<p>
  <img src="" id="image">
</p>

CSS：

<div class="container">
   <div class="outside">
      Example element to be outside container
   </div>
   <div class="another-content">
     Test content
   </div>
</div>

https://jsfiddle.net/vvesmed2/

从容器中分出，在完整内容的左侧

2 个答案: