绝对定位的div在相对父母边缘打破

4 回答

• 0

  我担心用你的标记解决这个问题是不可能的 . 但是隧道尽头还有一些亮点：你可以改变你的标记或使用javascript来实现你想要的 .

  根据您的要求，这可以帮助您：http://codepen.io/anon/pen/eJXYOJ

  html

  <div class="relativeContainer">
    <div class="absoluteContainer">
      <div class="contentContainer">
        Hello you! This breaks on relativeContainers edge.. This is not what i want. It should just go further an further (until it reaches max-width of 400px).
      </div>
    </div>
  </div>
  
  <div class="relativeContainer">
    <div class="absoluteContainer">
      <div class="contentContainer">
        This should stay small. 
      </div>
    </div>
  </div>
  

  css

  .relativeContainer {
    width: 300px;
    height: 100px;
    border: 1px solid black;
    position: relative;
    margin-bottom: 50px;
  }
  
  .absoluteContainer {
    position: absolute;
    width: 100vw; /* do a large number of px for ie8 compatibility*/
    top: 0;
    left: 0;
    background-color: lightgray; /* just to show you what I've done*/
  }
  
  .contentContainer {
    display: inline-block;
    max-width: 400px; /* Word-break should happen here. */
    border: 1px solid red;
  }
  

  回复于 2024-05-01T17:09:35+08:00
• 1

  绝对容器与相对父容器直接相关 .

  没有办法使绝对容器比相对父容器更大（宽度或高度） .

  如果您希望绝对容器比其父容器更大（宽度或高度），则父容器不应该是相对容器 .

  希望这有帮助 .

  祝你有个好的一天

  回复于 2024-05-01T17:09:35+08:00
• 0

  如果不使用其他类或使用JS，我不认为你想做什么 . 以下是使用css的方法：

  <div class="relativeContainer">
    <div class="absoluteContainer bigger">
      Hello you! This breaks on relativeContainers edge.. This is not what i want. It should just go further an further (until it reaches max-width of 400px).
    </div>
  </div>
  
  <div class="relativeContainer">
    <div class="absoluteContainer">
      This should stay small. 
    </div>
  </div>
  
  
  
  .relativeContainer {
    width: 300px;
    height: 100px;
    border: 1px solid black;
    position: relative;
    margin-bottom: 50px;
  }
  
  .absoluteContainer {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    max-width: 400px; /* Word-break should happen here. */
    border: 1px solid red;
  }
  
  .absoluteContainer.bigger{
    width: 400px;
  }
  

  回复于 2024-05-01T17:09:35+08:00
• 0

  我看了你的例子，如果绝对是在亲戚里面并且你没有指定宽度，我认为你不能做你想要的 . 目前，只有最大宽度，内部absoluteContainer没有理由走出相对容器，所以它不会 . 一旦你设置了一个宽度，你得到你想要的东西，但小的不能保持小！您可以通过在相对位置之外定位绝对但在同一位置来“欺骗”您想要的内容 . 这会给你一些你想要的东西 - 但如果绝对值更大，它就不会（比方说）滚动相对的一个 .

  示例：http://codepen.io/anon/pen/Nxovey

  如果您不想（或不能）使用额外的类在CSS中识别更长的文本，那么这是您在没有javascript的情况下可以做到的最好的 .

  码：

  <div class="spoofContainer">
    <div class="absoluteContainer">
      Hello you! This breaks on relativeContainers edge.. This is not what i want. It should just go further an further (until it reaches max-width of 400px).
    </div>
  </div>
  <div class="relativeContainer">
  
  </div>
  
  <div class="spoofContainer">
    <div class="absoluteContainer">
      This should stay small. 
    </div>
  </div>
  <div class="relativeContainer">
  
  </div>
  

  CSS：

  .spoofContainer {
    width: 400px;
    height: 0px;
    overflow: visible;
    position: relative;
  }
  
  .relativeContainer {
    width: 300px;
    height: 100px;
    border: 1px solid black;
    position: relative;
    margin-bottom: 50px;
  }
  
  .absoluteContainer {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    max-width: 400px; /* Word-break should happen here. */
    border: 1px solid red;
  }
  

  回复于 2024-05-01T17:09:35+08:00