Relatywnie pozycjonuj element bez zajmowania miejsca w przepływie dokumentów

189

Jak mogę względnie ustawić element tak, aby nie zajmował miejsca w obiegu dokumentów?

Projektant stron internetowych
źródło
2
Czy musi być umieszczony względnie? Elementy pozycjonowane absolutnie są usuwane z przepływu dokumentów.
Jason Gennaro

Odpowiedzi:

285

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>
Nightfirecat
źródło
jak w tym przypadku odziedziczyłbyś szerokość? ponieważ względna szerokość elementu div wynosi 0, absolutny element div nie byłby w stanie prawidłowo dziedziczyć szerokości, gdyby oba znajdowały się w kontenerze
Alex H
@AlexH Niestety ta metoda nie daje takiej możliwości. W tym przypadku radziłbym wypróbować metodę FredK z ujemną pozycją / ujemną marżą.
Nightfirecat
104

Dodaj margines równy przesuniętym pikselom:

Przykład

.box {
    position: relative;
    top: -30px; 
    margin-bottom: -30px;
}
Fred K.
źródło
5
jakoś ma dla mnie więcej sensu niż inna odpowiedź
markasoftware
2
czy to działa? Próbuję tego w chrome i wydaje się, że nie działa. Używam go do pozycjonowania przycisków nawigacyjnych z slidesjs, więc może to też być z tym związane.
Petruza,
1
Wypróbowałem to z left: -25px; margin-right: -25px;i z jakiegoś powodu nadal przesuwa elementy rodzeństwa w poziomie o 2-3 piksele.
Mike
Uwzględnij użycie, 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.
Damian Green
pamiętaj o dodatnich top:wartościach, które musisz mieć margin-bottom:równe minus wysokości elementu, a nie przemieszczeniu
Mr Heelis
23

Czytają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/

jeteon
źródło
3

Po prostu usuwasz ten element z przepływu dokumentu przez ustawienie position: absolutei pozostawiasz jego punkt przerwania poruszający się swobodnie wraz z dynamicznym przepływem treści, nie określając właściwości left top righti bottomstylu, 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.

Bekim Bacaj
źródło
prosty przykładowy kod może pomóc znacznie bardziej, zamiast czytać i rozumieć cały paragrah. Chociaż koncepcja jest jasna
MR_AMDEV,
0

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>

Reiner
źródło
0

@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 ...

  • używa czystego i prostego CSS i niczego więcej
  • jest ustawiony pionowo, tak jakby znajdował się w strumieniu ( topustawienie domyślne )
  • jest umieszczony poziomo przy prawej krawędzi strony ( right: 0)
  • nie zajmuje miejsca, ale porusza się naturalnie w miarę przewijania strony ( position: absolute)
John T.
źródło