Icon über Image

[Hannes Weninger]

Hallo,

ich hab grad Probleme, ein Icon über ein Image zu plazieren:

<div class="col-md-2">
		<img src="./assets/img/female.jpg" class="cursorPointer" alt="profilePic"/>
		<span class="glyphicon glyphicon-upload"></span>
	</div>

Hat da jemand vielleicht einen Tip, wie ich das am einfachsten schaffen kann?

Danke! Hannes

[Auge]

Hallo

ich hab grad Probleme, ein Icon über ein Image zu plazieren:

<div class="col-md-2">
		<img src="./assets/img/female.jpg" class="cursorPointer" alt="profilePic"/>
		<span class="glyphicon glyphicon-upload"></span>
	</div>

Hat da jemand vielleicht einen Tip, wie ich das am einfachsten schaffen kann?

Positioniere das div mit position: relative;, ohne Positionsangaben zu vergeben. Das div bleibt somit an Ort und Stelle und ist dennoch aus dem Dokumentfluss genommen. Die Kindelemente img und span positionierst du absolut, wobei sich die Positionen am relativ positionierten Elternelement ausrichten. Dann holst du das span mit z-index nach vorne.

Tschö, Auge

[MudGuard]

Hi,

Positioniere das div mit position: relative;, ohne Positionsangaben zu vergeben. Das div bleibt somit an Ort und Stelle

soweit kann ich dem zustimmen.

und ist dennoch aus dem Dokumentfluss genommen.

aber hier wage ich es, Zweifel anzumelden.

cu,
Andreas a/k/a MudGuard

[Auge]

Hallo

Positioniere das div mit position: relative;, ohne Positionsangaben zu vergeben. Das div bleibt somit an Ort und Stelle

soweit kann ich dem zustimmen.

und ist dennoch aus dem Dokumentfluss genommen.

aber hier wage ich es, Zweifel anzumelden.

Hmm, nach meinem Kenntnisstand bewirken alle Angaben zu position, die von static unterschiedlich sind, dass das Element aus dem Dokumentfluss genommen wird. Unser Wiki scheint mich zu bestätigen ^[1].

„Elemente können durch Verwendung der Eigenschaft position aus dem normalen Elementfluss entfernt werden“

Tschö, Auge

---

1. Bis auf die Wortwahl „Dokumentfluss“ vs. „Elementfluss“. Ich hoffe, dass das nicht dein Aufhänger war. ↩︎

[MudGuard]

Hi,

und ist dennoch aus dem Dokumentfluss genommen.

aber hier wage ich es, Zweifel anzumelden.

Hmm, nach meinem Kenntnisstand bewirken alle Angaben zu position, die von static unterschiedlich sind, dass das Element aus dem Dokumentfluss genommen wird. Unser Wiki scheint mich zu bestätigen [^1].

Nach meinem Kenntnisstand trifft das nur für absolute und fixed zu.

Bei relative wird ein im Dokument folgendes nicht-positioniertes Element genauso positioniert wie wenn das relative-positionierte Element static-positioniert wäre. Also ist es nach wie vor im Dokument-Fluß.

Bei absolute- oder fixed wird das folgende Element so positioniert, als wäre das absolute/fixed-Element gar nicht vorhanden (ist ja aus dem Fluß genommen).

„Elemente können durch Verwendung der Eigenschaft position aus dem normalen Elementfluss entfernt werden“

bestätigt weder Deine noch meine Ansicht - denn "können ... entfernt werden" ist nicht "werden ... entfernt".

cu,
Andreas a/k/a MudGuard

[Auge]

Hallo

und ist dennoch aus dem Dokumentfluss genommen.

aber hier wage ich es, Zweifel anzumelden.

Hmm, nach meinem Kenntnisstand bewirken alle Angaben zu position, die von static unterschiedlich sind, dass das Element aus dem Dokumentfluss genommen wird.

Nach meinem Kenntnisstand trifft das nur für absolute und fixed zu.

Nach meinem Kenntnisstand gilt das für alle Werte außer static.

Bei relative wird ein im Dokument folgendes nicht-positioniertes Element genauso positioniert wie wenn das relative-positionierte Element static-positioniert wäre.

Das ist korrekt. Das Element verbleibt „erstmal“ am angestammten Platz. Wenn aber Positionswerte angegeben werden, wird das mit „relative“ positionierte Element um die angegebenen Werte gegenüber der mit „static“ geltenden Position verschoben, wobei der ursprünglich eingenommene Platz frei bleibt. Dazu muss es aber schon aus dem Elementfluss genommen sein. Warum soll es dabei aber einen Unterschied zwischen position: relative; ohne Angaben zur Position und position: relative; mit solchen Angaben geben?

… etwa eine Stunde später, das Posting immer noch nicht abgeschickt habend …

Bei uns ist gerade die Kacke am dampfen, weil sich in einem Teil des Firmennetzes ein Verwandter von TeslaCrypt breit macht. Zum ruhig lesen, nachschlagen und analysieren ist jetzt leider nicht die Zeit. Deshalb nur als Link der Text der W3C-Seite zu Position. Vielleicht hilft uns ja auch der eine oder andere Mitlesende bei der Klärung dieser Frage.

Normen mit ihren „must“ und „should“ und „may“ u.s.w. verwirren mich eh ein wenig. Da käme Hilfe gerade recht.

Tschö, Auge

[Matthias Apsel]

Hallo Auge,

Nach meinem Kenntnisstand gilt das für alle Werte außer static.

Bei relative wird ein im Dokument folgendes nicht-positioniertes Element genauso positioniert wie wenn das relative-positionierte Element static-positioniert wäre.

Das ist korrekt. Das Element verbleibt „erstmal“ am angestammten Platz. Wenn aber Positionswerte angegeben werden, wird das mit „relative“ positionierte Element um die angegebenen Werte gegenüber der mit „static“ geltenden Position verschoben, wobei der ursprünglich eingenommene Platz frei bleibt. Dazu muss es aber schon aus dem Elementfluss genommen sein. Warum soll es dabei aber einen Unterschied zwischen position: relative; ohne Angaben zur Position und position: relative; mit solchen Angaben geben?

Ich stimme zu.

Bis demnächst
Matthias

[MudGuard]

Hi,

Nach meinem Kenntnisstand trifft das nur für absolute und fixed zu.

Nach meinem Kenntnisstand gilt das für alle Werte außer static.

Gucken wir doch mal nach:

CSS 2.1 Position sagt:

static

The box is a normal box, laid out according to the normal flow. The 'top', 'right', 'bottom', and 'left' properties do not apply. 

relative

The box's position is calculated according to the normal flow (this is called the position in 

normal flow). Then the box is offset relative to its normal position. When a box B is relatively positioned, the position of the following box is calculated as though B were not offset. The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined.

absolute

The box's position (and possibly size) is specified with the 'top', 'right', 'bottom', and 'left' properties. These properties specify offsets with respect to the box's containing block. Absolutely positioned boxes are taken out of the normal flow. This means they have no impact on the layout of later siblings. Also, though absolutely positioned boxes have margins, they do not collapse with any other margins. 

fixed

The box's position is calculated according to the 'absolute' model, but in addition, the box is fixed with respect to some reference. As with the 'absolute' model, the box's margins do not collapse with any other margins. In the case of handheld, projection, screen, tty, and tv media types, the box is fixed with respect to the viewport and does not move when scrolled. In the case of the print media type, the box is rendered on every page, and is fixed with respect to the page box, even if the page is seen through a viewport (in the case of a print-preview, for example). For other media types, the presentation is undefined. Authors may wish to specify 'fixed' in a media-dependent way. For instance, an author may want a box to remain at the top of the viewport on the screen, but not at the top of each printed page. 

Zitatende.

Nochmal rausgezogen:

relative

The box's position is calculated according to the normal flow

Nur bei absolute heißt es "Absolutely positioned boxes are taken out of the normal flow.". Wobei es bei fixed heißt, daß es sich analog absolute verhält.

==> static + relative: im flow, absolute + fixed aus dem flow.

CSS 3 sagt zur Relative:

Once a box has been laid out according to the normal flow or floated, it may be offset relative to this position. ... 

==> relative: ist im flow, aber ggf. verschoben.

cu,
Andreas a/k/a MudGuard