Jak mogę względnie ustawić element tak, aby nie zajmował miejsca w obiegu dokumentów?
html
css
positioning
css-position
Projektant stron internetowych
źródło
źródło
Odpowiedzi:
To, co próbujesz zrobić, brzmi jak pozycjonowanie absolutne. Z drugiej strony możesz jednak utworzyć element pseudo-względny, tworząc element pozycjonowany względnie o zerowej szerokości i zerowej wysokości, zasadniczo wyłącznie w celu utworzenia punktu odniesienia dla pozycji i elementu pozycjonowanego absolutnie w tym:
<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>
źródło
Dodaj margines równy przesuniętym pikselom:
Przykład
.box { position: relative; top: -30px; margin-bottom: -30px; }
źródło
left: -25px; margin-right: -25px;
i z jakiegoś powodu nadal przesuwa elementy rodzeństwa w poziomie o 2-3 piksele.float:right;
gdy chcesz ustawić to względem prawej strony ekranu, aby wartości prawej lub lewej strony były mniejsze i łatwiejsze do zarządzania.top:
wartościach, które musisz miećmargin-bottom:
równe minus wysokości elementu, a nie przemieszczeniuCzytając trochę, wydaje się, że można bezwzględnie pozycjonować element, o ile element nadrzędny jest ustawiony względnie. Oznacza to, że jeśli masz CSS:
.parent { position: relative; } .parent > .child { position: absolute; }
Wtedy element potomny nie zajmie w ogóle miejsca w przepływie dokumentu. Następnie możesz go ustawić za pomocą jednej z właściwości „left”, „bottom” itp. Względne pozycjonowanie na rodzica zwykle nie powinno mieć na to wpływu, ponieważ zostanie domyślnie ustawione w pierwotnym położeniu, jeśli nie określisz „lewo”, „dół” itp.
http://css-tricks.com/absolute-positioning-inside-relative-positioning/
źródło
Po prostu usuwasz ten element z przepływu dokumentu przez ustawienie
position: absolute
i pozostawiasz jego punkt przerwania poruszający się swobodnie wraz z dynamicznym przepływem treści, nie określając właściwościleft top right
ibottom
stylu, które będą zmuszać go do dynamicznego używania względnego punktu końcowego przepływu. W ten sposób element pozycjonowany absolutnie będzie podążał za obiegiem dokumentu, jednocześnie usuwając się z zajmowanego miejsca.Nie są potrzebne żadne atrapy.
źródło
U mnie podane rozwiązania nie sprawdziły się. Chcę zobaczyć h3, niż tekst, a potem panele Bootstrap, zsynchronizowane pionowo z tymi panelami, chcę zobaczyć inne panele po prawej stronie,
Udało mi się to z opakowaniem wysokości: 0 i po tej pozycji: względna; po lewej: 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>
źródło
@Bekim Bacaj udzielił mi idealnej odpowiedzi, mimo że może nie być dokładnie tym, czego szukał OP (chociaż jego pytanie pozostawia miejsce na interpretację). Mimo to Bekim nie podał przykładu.
<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>
Powyższy przykład konfiguruje element, który ...
top
ustawienie domyślne )right: 0
)position: absolute
)źródło