CSS de positionnement relatif avec la valeur négative et la hauteur

Je suis en train de position négative d'un élément DIV (dans l'exemple #contenu), mais mon problème est le div conteneur (#wrapper2), obtient trop de hauteur (en fait, est la hauteur de la #contenu est de donner, mais comme je suis de déplacer le contenu, je voudrais diminuer la hauteur de #wrapper2 en conséquence).

Ici, je vous donne un exemple pour montrer ce que je suis en train de réaliser. Si vous essayez de l'échantillon, vous verrez que le pied de page reste à trop de distance à partir du conteneur. Je peux faire une sale hack ici et faire le pied de page, en haut:-200px trop mais alors la barre de défilement de la fenêtre passe au-dessus du pied de page.

<!DOCTYPE html>
<html>
<head>
    <title>Relative positioning demo</title>
    <style>
        /* RESET STUFF */
        html {
          margin:0;
          padding:0;
          border:0;
        }

        body, div, p, h1 {
          margin: 0;
          padding: 0;
          border: 0;
        }
        /* END RESET */

        h1 {
            background-color: yellow;
        }

        p {
            margin-bottom: 1em;
        }

        /* LAYOUT */
        #wrapper1 {
            text-align: center;
            height: 250px;
            background-color: lightgray;
        }
        #wrapper2 {
            background-color: lightblue;
        }
        #content {
            width: 950px;
            margin: 0 auto;
            background-color: white;
            padding: 5px;
            height: 560px;

            /* HERE's my problem */
            position: relative;
            top: -200px;
        }
        #footer {
            background-color: black;
            color: white;
            height: 40px;
            line-height: 40px;
            text-align: center;
        }               
    </style>
</head>
<body>
    <div id="wrapper1">
        <h1>This is my heading</h1>
    </div>
    <div id="wrapper2">
        <div id="content">
            My content here
        </div>
    </div>
    <div id="footer">
        lorem ipsum
    </div>
</body>
</html>

Si vous avez des suggestions, gardez à l'esprit que je dois voir à la fois, la lightgrey et lightblue arrière-plan (ce sont des images sur mon site), donc margin-top: -200px n'est pas une option (comme quelqu'un l'a suggéré dans les questions connexes que j'ai cherché pour l')

Merci!

  • Je crois comprendre ce que vous essayez de faire, mais vous ne pourriez pas vous venez de définir une image comme arrière-plan de l'image dans le corps, et l'autre placé dans un div?
  • Belle approche boblet, je vais essayer et voir ce qui se passe...
  • Très bonne idée boblet. Je n'ai pas fait ce que vous avez suggéré, mais vous avez m'a indiqué la bonne direction, voir la réponse ci-dessous.
InformationsquelleAutor mTorres | 2011-10-25
  1. 11

    Changer le top propriété margin-top

    Démo

            position: relative;
        top: -200px;

    changé à

            margin-top: -200px;
    • Grâce Josep, mais comme je l'ai dit dans la question, ce n'est pas une option parce que les wrapper1 perd toute sa hauteur (comme je l'ai déjà dit c'est une image dans mon site et si je viens de mettre margin-top: -200px que vous êtes suggérant, je ne vais pas la voir)
    InformationsquelleAutor Joseph Marikle
  2. 0

    Pour de futures références, ce que j'ai enfin fait est de fusionner les images sur le wrapper1 et l'enveloppe 2 dans la même image (ils étaient motifs d'arrière-plan), donc je n'ai qu'un wrapper maintenant, et je n'ai pas besoin de la position relative du contenu au-dessus de la seconde, il s'en va juste après la page de flux.

    En fin de compte j'ai bien compris que vous ne pouvez pas supprimer les indésirables de la hauteur sans l'aide de Javascript.

    InformationsquelleAutor mTorres