Wert zurücksetzen von CSS Eigenschaften

coldstone28

Mitglied
Hallo,

wie kann ich den Wert einer CSS Eigenschaften zurückstzen?

Ich habe eine ELement welches ich in der normalen Ansicht mit top:30px; positioniert habe.
Nun möchte ich aber es in der mobilen Ansicht mit bottom:0; positionieren.
Da aber das Elternelement die Eigenchaft top:30px hat, springt er nicht nach unten.

Habe es mal mit top:none; veruscht aber ohne erfolg.
 
Wenn Du deinem Elternelement "top: 30px;" gegeben hast, kannst Du es nur manipulieren in dem Du den Wert überschreibst.

Das geht eigentlich sehr einfach: "top: 0 !important;", hier ist der Schlüssel "!important" zu nutzen.
Mit diesen überschreibst du für das Element den Wert Top des Elternelementes.

Arbeitest Du mit MediaQueries? :)
 
Arbeitest Du mit MediaQueries? :)

Genau so ist es. :)
Verstehe ich das richtig, dass "!important" dann für für dieses Element gilt und nicht wieder verändert werden kann? Wenn z.B. bei einem weitern viewport, ich top 100px angebe, er es nicht ändern würde, da "!important" mehr gewichtet?
Falls ja, stellt sich dann die frage, was passiert wenn "!important", dann wieder mit "!important" kollidiert? Das letzte gewichtet dann mehr?
Ich hoffe ich konnte die frage richtig formulieren? o_O
 
Wenn Du mit MediaQueries arbeitest, ist es mit dem !important kein Thema. Da er es nur dann mehr gewichtet.

Beispiel:
CSS:
div {
    background-color: #fff;
    width: 200px;
    height: 200px;
    color: #000;
}

/* Hier wird der ganze DIV-Container beeinflusst */
@media print {
    div {
        background-color: #000 !important;
        width: 300px !important;
        height: 300px !important;
        color: #fff !important;
    }
}

/* Background und Breite werden beeinflusst */
@media (min-width: 768px) {
    div {
        background-color: #0f0 !important;
        width: 500px !important;
    }
}

/* Nur Breite und Höhe werden beeinflusst */
@media (min-width: 992px) {
    div {
        width: 350px !important;
        height: 100px !important;
    }
}

/* Nur Höhe werden beeinflusst */
@media (min-width: 1200px) {
    div {
        height: 800px !important;
    }
}

Hier werden jenachdem welches Querie zutrifft, nur die Werte geändert die dort stehen.
Sind werte nicht mit !important gesetzt haben die auf das Elternelement keine auswirkung.

Bei den Media-Queries wird es sehr häufig verwendet, da es keine andere Möglichkeit gibt, des ElternElementes einer CSS-Klasse oder einem Indikator zu verändern bzw. zu Manipulieren.

Aktuell ist mir auch nicht wirklich bekannt das, wenn man ein Element eine Feste CSS zuweist, sie anders Manipulieren kann :)
 
Zurück