1. 首頁
  2. 問答
  3. 相對定位一個元素，不佔用文檔流中的空間

相對定位一個元素，不佔用文檔流中的空間

2011-05-18 86 views

回答

210

你想要做的事情聽起來像絕對定位。另一方面，你可以通過創建一個零寬度，零高度，相對定位的元素來創建一個僞相關元素，基本上只是爲了創建一個位置的參考點和一個絕對定位的元素內：

<div style="position: relative; width: 0; height: 0"> 
    <div style="position: absolute; left: 100px; top: 100px"> 
     Hi there, I'm 100px offset from where I ought to be, from the top and left. 
    </div> 
</div>

來源

2011-05-18 05:30:02 Nightfirecat

+0

在這種情況下，你將如何繼承寬度？由於相對的div寬度爲0，如果絕對div不在容器中，絕對div將無法正確繼承寬度 – 2017-02-20 06:24:42

+0

@AlexH不幸的是，此方法不提供這種方法。我建議在這種情況下嘗試FredK的負位置/負邊界方法。 – Nightfirecat 2017-02-24 21:51:37

54

添加等於你移動的像素的邊距：

例

.box { 
    position: relative; 
    top: -30px; 
    margin-bottom: -30px; 
}

來源

2013-06-11 16:18:04

+4

莫名其妙地對我更有意義比其他答案 – Markasoftware 2013-11-03 04:44:11

+5

我喜歡這個，因爲它不需要任何額外的標記。 – arlomedia 2013-12-17 16:57:30

+1

這是否工作？我正在嘗試鉻，似乎並沒有工作。我正在使用它來定位slidesjs中的導航按鈕，因此也可能會弄亂它。 – Petruza 2014-02-19 17:49:39

14

從讀了一點，看來你可以絕對位置的元素，只要父元素相對定位。這意味着如果你有CSS：

.parent { 
    position: relative; 
} 
.parent > .child { 
    position: absolute; 
}

然後子元素將不會在文檔流中佔用任何空間。然後你可以使用其中一個「左」，「底」等屬性來定位它。父的相對位置不應該通常會影響它，因爲它會被默認放置在原來的位置，如果你不指定「左」，「底」等

http://css-tricks.com/absolute-positioning-inside-relative-positioning/

來源

2014-01-17 13:56:57 jeteon

0

對我來說給定的解決方案無法正常工作。 我想看到一個h3，比文本和之後，Bootstrap面板，垂直同步到這個面板，我想看到右側的其他面板，

我管理這個與高度：0包裝，之後位置：相對;左：100％。

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 

 
    <div class="row"> 
 
     <div class="col-md-9"> 
 
      <div class="col-md-12"> 
 
       <h3> hello </h3> 
 
      </div> 
 
      <div class="col-md-12"> 
 
       <span> whats up? </span> 
 
      </div> 
 
      <div style="height:0" class="col-md-12"> 
 
       <div style="left:100%" class="col-md-3"> 
 
        <div class="panel panel-default"> 
 
         <div class="panel-heading"> 
 
          <h3 class="panel-title">Panel title</h3> 
 
         </div> 
 
         <div class="panel-body"> 
 
          <p>Panel Body</p> 
 
         </div> 
 
        </div> 
 
       </div> 
 
      </div> 
 

 
      <div class="col-md-12"> 
 
       <div class="panel panel-default"> 
 
        <div class="panel-heading"> 
 
         <h3 class="panel-title">Panel title</h3> 
 
        </div> 
 
        <div class="panel-body"> 
 
         <p>Panel Body</p> 
 
        </div> 
 
       </div> 
 
       <div class="panel panel-default"> 
 
        <div class="panel-heading"> 
 
         <h3 class="panel-title">Panel2 title</h3> 
 
        </div> 
 
        <div class="panel-body"> 
 
         <p>Panel Body</p> 
 
        </div> 
 
       </div> 
 
      </div> 
 

 
     </div> 
 
     <div class="col-md-3"> 
 
      <!--placeholder--> 
 
     </div> 
 

 
    </div> 
 
</div>

來源

2016-11-10 13:24:32 Reiner

1

您只需脫下文檔流程該元素通過設置position: absolute，並保持它的自由斷裂點移動與不內容的動態流指定left top right和bottom樣式屬性這將迫使它動態地使用流的相對端點。這樣，絕對定位的元素將遵循文檔流程，同時消除佔用空間。

不需要虛擬包裝。

來源

2017-08-23 01:01:59

相關問題

 相關問題