CSS position relative ohne relative Breite?

Ich würde gerne ein element mit relativer Positionierung. Aber ich will nicht das untergeordnete element (mit position:absolute) relative Breite der Eltern.

Beispiel: http://jsfiddle.net/t2yJP/. Ich würde gerne die zweite body>div zu haben position:relative haben, aber Ihr Kind ist die Breite bei gleichbleibendem Verhalten.

Warum die Abstimmung zu schließen? Wenn das nicht möglich ist, sagen Sie einfach so.
Ich denke, die Abstimmung zu schließen kam zustande, weil es ziemlich schwierig ist, zu verstehen, was Sie zu Fragen sind - aber ich persönlich glaube nicht, dass es verdient, als in der Nähe Stimmen. Wenn du meinst, dass Sie wollen, dass der text zu fließen aus dem absolut positionierten div, so wie in deinem zweiten Beispiel, dann können Sie whitespace: nowrap.
Das ist sozusagen das, was ich suchte. Ich will, dass die absolut positionierten div zu erweitern, um seine Natürliche Breite, nicht eingeengt durch seine position:relative Eltern. Im zweiten Beispiel, wird der text noch wickeln, Sie einfach nicht werden die Eltern der Breite.
Die "Natürliche Breite" von einem div ist auf 100% des zur Verfügung stehenden Raums - in diesem Fall werden 100% der Platzierten Eltern der Breite. Also, wenn Sie geben Sie eine Breite für die absolut positionierten div-selbst dann müssen Sie ändern die Weise, die Ihnen eine Strukturierung Ihrer html

InformationsquelleAutor Azmisov | 2012-05-02

0

Wie etwa dieses jsFiddle.

Aber Sie sollten wirklich überdenken Sie Ihre Strategie. In Ihrer fiddle, dein zweites Beispiel funktioniert nur, weil das übergeordnete div-Element nicht positioniert, und daher die .abs div technisch nicht in der übergeordneten.

Normal, child-Elemente innerhalb Ihrer Eltern. Das ist es, was Container sind für! Also, wenn Sie nicht wollen, dass die .abs div gezwungen zu werden, indem Sie das rote Rechteck, legen Sie es nicht in das rote Rechteck.

InformationsquelleAutor Mr Lister
1

Versuchen Sie width:inherit zu den .abs Klasse.

Ich möchte es anders herum. Das erste Feld, Verhalten sich wie die zweite.

InformationsquelleAutor Travesty3

War ich in der Lage zu erreichen eine ähnliche Wirkung wie folgt:

<div class='abs pad'>
    Content content content
</div>
<div class='rel pad red'>
</div>

.rel {
    position: relative;
}
.abs {
    position: absolute;
    z-index: 1;
}
.pad {
    padding: 2px;
    margin: 2px;
}
.red {
    border: 1px solid black;
    width: 100px;
    height: 100px;
    background-color: red;
}

InformationsquelleAutor Neil

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.