Làm thế nào tôi có thể định vị tương đối một yếu tố và nó không chiếm không gian trong luồng tài liệu?
Câu trả lời:
Những gì bạn đang cố gắng làm âm thanh như định vị tuyệt đối. Mặt khác, tuy nhiên, bạn có thể tạo một phần tử giả tương đối, bằng cách tạo phần tử có độ rộng bằng không, chiều cao bằng 0, vị trí tương đối, chủ yếu chỉ nhằm mục đích tạo điểm tham chiếu cho vị trí và phần tử được định vị tuyệt đối trong đó:
<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>
Thêm một lề bằng với các pixel mà bạn đã di chuyển:
Thí dụ
.box {
position: relative;
top: -30px;
margin-bottom: -30px;
}
left: -25px; margin-right: -25px;nó và nó vẫn bù đắp các yếu tố anh chị em theo chiều ngang 2-3 pixel vì một số lý do.
float:right;khi bạn muốn làm điều này liên quan đến phía bên phải của màn hình để các giá trị bên phải hoặc bên trái có thể nhỏ hơn và dễ quản lý hơn.
top:các giá trị tích cực mà bạn cần phải có margin-bottom:bằng điểm trừ của chiều cao phần tử chứ không phải độ dịch chuyển
Từ việc đọc lên một chút, có vẻ như bạn có thể định vị tuyệt đối một yếu tố miễn là yếu tố cha mẹ được định vị tương đối. Điều đó có nghĩa là nếu bạn có CSS:
.parent {
position: relative;
}
.parent > .child {
position: absolute;
}
Sau đó, phần tử con sẽ không chiếm bất kỳ khoảng trống nào trong luồng tài liệu. Sau đó, bạn có thể định vị nó bằng một trong các thuộc tính "bên trái", "dưới cùng", v.v. Định vị tương đối trên cha mẹ thường không ảnh hưởng đến nó bởi vì nó sẽ được định vị ở vị trí ban đầu theo mặc định nếu bạn không chỉ định "bên trái", "dưới cùng", v.v.
http://css-tricks.com/absolute-poseitioning-inside-relative-poseitioning/
Bạn chỉ cần lấy phần tử đó ra khỏi luồng tài liệu bằng cách cài đặt position: absolutevà để điểm ngắt di chuyển tự do với luồng nội dung động bằng cách không chỉ định các thuộc tính left top rightvà bottomkiểu sẽ buộc nó sử dụng điểm cuối tương đối của luồng một cách linh hoạt. Bằng cách này, phần tử được định vị tuyệt đối sẽ theo luồng tài liệu trong khi loại bỏ nó khỏi chiếm không gian.
Không có giấy gói giả là cần thiết.
Đối với tôi, các giải pháp đã cho không hoạt động tốt. Tôi muốn xem h3, hơn văn bản và sau bảng Bootstrap đó, đồng bộ dọc với bảng này tôi muốn xem các bảng khác ở bên phải,
Tôi đã quản lý điều này với trình bao bọc chiều cao: 0 và sau vị trí đó: tương đối; bên trái: 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>@Bekim Bacaj đã có câu trả lời hoàn hảo cho tôi, mặc dù nó có thể không chính xác là những gì OP đang tìm kiếm (mặc dù câu hỏi của anh ấy có chỗ để giải thích). Điều đó đang được nói, Bekim đã không cung cấp một ví dụ.
<h1>Beneath this...</h1>
<style>
.HoverRight {
background: yellow;
position: absolute;
right: 0;
}
</style>
<div class="HoverRight">Stuff and Things!</div>
<p>but, top = same as this paragraph.</p>
Ví dụ trên thiết lập một yếu tố ...
topcài đặt mặc định )right: 0)position: absolute)