Korrekte Verwendung von Eigenschaft margin ein Logo auf der rechten Seite

Question

Mit html

<div class="wrapper" id="top"> 
    <div class="main-logo bg-yellow-niza"> 
    <img src="http://eurekavi.com/car/images/logo.png" alt=""></div> 
</div> 

und CSS lokalisieren

.wrapper { 
    width: 100%; 
    margin: 0 auto; 
} 

.main-logo { 
    background: #707070; 
    height: 100px; 
    width: 100px; 
    margin: 0 auto; 
    left: 0; 
    right: 0; 
    position: absolute; 
    z-index: 9999; 
} 

.main-logo img { 
    text-align: right; 
    margin: 0 auto; 
    margin-top: 0; 
    width: 100%; 
} 

Es zeigt richtig ein Logo in der Mitte des Bildschirms, jedoch möchte ich es lokalisieren bei 200 px vor der rechten Ecke.

Ich habe versucht, left: 0; and right: 0; Werte zu modifizieren, aber ich bin nicht in der Lage das Logo etwas px vor dem rechts außen zu suchen.

Wie geht das?

nehmen Sie bitte einen Blick auf die jsfiddle

Answer 1

ändern diese:

.main-logo { 
    background: #707070; 
    height: 100px; 
    width: 100px; 
    margin: 0 auto; 
    left: 0; 
    right: 0; 
    position: absolute; 
    z-index: 9999; 
} 

dazu:

.main-logo { 
    background: #707070; 
    height: 100px; 
    width: 100px; 
    right: 200px; 
    position: absolute; 
    z-index: 9999; 
} 

Der Unterschied Einstellungen ist die 'richtige' Position zu 200px, ‚links Entfernen : 0; ' und Entfernung der Ränder.

Answer 2

Sie können versuchen, das .main-logo div nach rechts zu schweben und dann mit dem Rand es von der Ecke des enthaltenden div wegzuzwingen.

.main-logo { 
    background: #707070; 
    height: 100px; 
    width: 100px; 
    z-index: 9999; 
    float: right; 
    margin: 200px 200px 0 0; 
} 

Ist hier modifizierte Geige: https://jsfiddle.net/eroche/d0xjfbuk/

Answer 3

Sie wollen

.main-logo img{ 
float: right 
} 

Oder

.main-logo img{ 
display: inline-block 
} 

aktualisieren ich Ihren Code vereinfachen würde. Vieles davon brauchst du nicht und einige solltest du wahrscheinlich vom Browser behandeln lassen, da sie auf Dauer Probleme verursachen können.

In Ihrem HTML legen Sie Ihre Höhe und Breite fest. Es ist 508 konform und der "richtige" Ort dafür.

<div class="wrapper" id="top"> 
    <div class="main-logo bg-yellow-niza" 
<img src="http://eurekavi.com/car/images/logo.png" alt=""></div> 
</div> 

In Ihrem CSS:

Ich würde das, dass definieren mit mir alle meinem gewickelten Elemente möge hier enthalten sein. Wenn ich möchte, dass der Container 100% ist, würde ich den Rand 0 auto nicht tun. Oder wenn Sie nur möchten, dass Ihr Inhalt die Seite füllt, dann müssen Sie dem Wrapper keinen Stil zuweisen, sondern nur den inneren Inhalt festlegen.

Die Höhe dieses Bereichs wird durch die Attribute height und width im HTML img-Tag festgelegt. Sie könnten etwas Polsterung hinzufügen, wenn Sie möchten, dass der Inhalt etwas Platz hat. Aber das meiste brauchst du nicht. P.S. Der Z-Index könnte in der Zukunft Probleme verursachen, wenn Sie ihn selbst zuweisen. Es kann am besten sein, wenn der Browser es tut, es sei denn, du bist dir sicher, dass du es tun musst.

Stellt nur die Hintergrundfarbe ein.

.main-logo { 
    background: #707070; 
    /* not needed 
    height: 100px; 
    width: 100px; 
    margin: 0 auto; 
    left: 0; 
    right: 0; 
    position: absolute; 
    z-index: 9999; 
    */ 
} 

Jetzt stellen Sie einfach Ihre Inge nach rechts schweben.

.main-logo img { 
    float: right; 
/* not needed 
    text-align: right; 
    margin: 0 auto; 
    margin-top: 0; 
    width: 100%; 
*/ 
}