Stil nicht auf feste div erscheint

Question

Ich habe ein div, dass ich auf anderen divs erscheinen soll und dies ist der Code dafür:

function displayMessage(content) { 
     //content is a string 
     var newElement = document.createElement('div'); 
     newElement.innerHTML = content; 
     newElement.style.position = "fixed"; 
     newElement.style.left = "50%"; 
     newElement.style.right = "50%"; 
     newElement.style.top = "50%"; 
     newElement.style.bottom = "50%"; 
     newElement.style.backgroundColor = "#99ff33"; 
     newElement.style.border = "thick solid"; 
     newElement.style.display = "inline-block"; 
     newElement.style.zIndex = 100 
} 

Wenn ich dies tun, die Hintergrundfarbe nicht erscheint und die Grenze ist nur ein Punkt auf dem Bildschirm. Aber wenn ich die Position auskommentiere, funktioniert alles gut, aber mein div ist auf der Unterseite des Bildschirms.

function displayMessage(content) { 
     //content is a string 
     var newElement = document.createElement('div'); 
     newElement.innerHTML = content; 
     //newElement.style.position = "fixed"; 
     newElement.style.left = "50%"; 
     newElement.style.right = "50%"; 
     newElement.style.top = "50%"; 
     newElement.style.bottom = "50%"; 
     newElement.style.backgroundColor = "#99ff33"; 
     newElement.style.border = "thick solid"; 
     newElement.style.display = "inline-block"; 
     newElement.style.zIndex = 100 
} 

Wie kann ich die Hintergrundfarbe und Rand erscheinen lassen und immer noch den div's Stil behoben haben?

Answer 1

Sie festgelegt haben, die 'links' und 'rechts' Eigenschaften auf 50%, was bedeutet, die linke gezwungen der div zu 50% der Bildschirmbreite weg von der linken Seite des Bildschirms (dh die Mitte des Bildschirms) und das gleiche für die rechte Seite. Also kann es nicht mehr als 0 Pixel sein.

Versuchen einen etwas niedrigeren Wert als 50%, oder sie setzen eine calc und einen Satz Breite unter Verwendung von, zum Beispiel:

newElement.style.left = "calc('50% - 100px')"; 
newElement.style.width = "200px"; 

Dies behebt die linke Position zu 100 Pixel weniger als 50% der Bildschirmbreite . So, dass kombiniert mit einer 200px Breite wird es zentrieren, wenn das was Sie wünschen. Beachten Sie, dass der "richtige" Stil nicht mehr notwendig ist. Dann mach das gleiche für den oberen und unteren Rand.

Answer 2

Fügen Sie diese am Boden:

document.getElementsByTagName('body')[0].appendChild(newElement); 

Like This

function displayMessage(content) { 
    //content is a string 
    var newElement = document.createElement('div'); 
    newElement.innerHTML = content; 
    newElement.style.position = "fixed"; 
    newElement.style.left = "50%"; 
    newElement.style.right = "50%"; 
    newElement.style.top = "50%"; 
    newElement.style.bottom = "50%"; 
    newElement.style.backgroundColor = "#99ff33"; 
    newElement.style.border = "thick solid"; 
    newElement.style.display = "inline-block"; 
    newElement.style.zIndex = 100; 
    document.getElementsByTagName('body')[0].appendChild(newElement); 
}