CSS Problème: Texte assis en dessous de la position fixe Div

J'ai un site Web avec un arrière-plan fixe et une autre petite image qui doit s'asseoir au centre de la page que j'ai positionné avec succès, mais le problème vient quand j'en mets un autre div dans qui est censé contenir le texte et le contenu, il se trouve sous l'image.CSS Problème: Texte assis en dessous de la position fixe Div

Vous pouvez voir mon exemple ici: (S'il vous plaît ne vous inquiétez pas de l'URL! Ce n'est pas quelque chose douteux ou dégoûtant, c'est juste ma fange autour du domaine). http://liquid-shit.com/csstest.php (la page)

(SO est seulement me laisser poster un hyper lien alors voici le lien vers le css avec elle dissociées, supprimer l'espace entre le/'s)

http:// liquide -shit.com/csstest.css (la page)

Comme vous pouvez le voir au bas de la page, les deux petites images fleuries blanches sont au-dessus du texte. J'ai essayé de changer l'ordre des divs dans le html et le z-indexes etc.

Mon CSS est un peu rouillé et celui-ci m'a coincé.

Merci à l'avance - Ben

Source

2010-01-05 Ben

Plutôt que de placer un espace entre les barres obliques, encapsulez le lien entre les renvois arrière afin que SO le traite comme un littéral de code. –

positionnement fixe toujours s'asseoir au-dessus de débit (normal) positionnement. Vous devez modifier #content pour utiliser un positionnement absolu ou fixe, puis positionner correctement l'élément.

Voici le CSS mise à jour:

#content { 
    width:200px; 
    min-height:100%; 
    margin:auto; 
    z-index:1; 
    position:absolute; 
    left:50%; 
    margin-left:100px; /* half the width to obtain proper offset */ 
}

Source

2010-01-05 04:32:50

Merci mon pote! Si simple à la fin. Je pensais que ça pourrait être. – Ben

Après avoir regardé le code source de http://liquid-shit.com/csstest.php, vous devez mettre votre contenu et la boîte fixe dans 2 séparé div s

<body> 
    <div id="content"> 
     lorem ipsume says put your content here. 
    </div> 

    <div id="footer"> 
     &nbsp; 
    </div> 

</body>

position fixe de votre #footer et donnez-lui z-index élevé pour avoir le contenu de #content derrière lui.

Source

2010-01-05 04:38:17

J'ai obtenu l'effet que je pense que vous recherchez avec le CSS suivant. (Cela élimine également la nécessité pour le pattern div.)

html, body { 
background-color:#000f2f; 
background-image:url(backgroundgradient.jpg); 
background-repeat:repeat-x; 
background-attachment:fixed; 
background-position:bottom; 
height:100%; 
} 

#content { 
background-image:url(pattern.png) ; 
background-attachment: fixed; 
background-repeat:no-repeat; 
background-position:bottom; 
width:200px; 
min-height:100%; 
margin:auto; 
z-index:1; 
}

EDIT: fixe copier/coller erreur de modifier précédente.

Source

2010-01-05 04:44:14

Oh, et vous n'avez plus besoin de l'index z, non plus. –

CSS Problème: Texte assis en dessous de la position fixe Div

Répondre

Questions connexes