Scribd Logo
Importer

Bienvenue sur Scribd !

  • TPn°4 Position

    Transféré par

    Fredj Imed
    46 vues4 pages

    Titre original

    TPn°4_position

    Copyright

    © © All Rights Reserved

    Formats disponibles

    DOCX, PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme DOCX, PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    46 vues4 pages

    TPn°4 Position

    Transféré par

    Fredj Imed

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme DOCX, PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 4

    3SI

    Position : static, Prof:Fredj Imed


    relative, fixed, absolute, sticky

    Résumé :
    Position L'élément bouge % à Sa position initiale est :
    static L'élément n'est pas sensible aux propriétés Ne change pas
    top,right,bottom et left
    ne bouge pas
    Relative Sa place d'origine Conservé
    fixed La fenêtre (ne bouge pas lors du scrolling ) Perdu (les autres éléments prenne
    sa pace )
    absolute Premier parent possédant la propriété Perdu
    position et la fenêtre s'il ne trouve pas
    sticky Comportement qui regroupe fixed et Perdu
    relative :
     Un élément avec position : stcky est
    positionné en fonction de la position
    de défilement de l'utilisateur.
     Un élément sticky bascule entre
    relatif et fixe, en fonction de la
    position de défilement. Il est
    positionné de manière relative
    jusqu'à ce qu'une position de
    décalage donnée soit rencontrée
    dans la fenêtre - puis il "colle" en
    place (comme position:fixed).
    TPN°4☹position ) 😊

    Position : relative
    html CSS
    <!DOCTYPE html> h1{
    <html>     border:solid;
    <head>     width:50%;
        <meta charset='utf-8'>     padding: 4%;
        <meta http-equiv='X-UA-Compatible'     text-align: center;
    content='IE=edge'> }
        <title>Page Title</title> #t2{
        <meta name='viewport'     position:relative;
    content='width=device-width, initial-     top:200px;
    scale=1'>     color:red;
        <link rel='stylesheet' type='text/css'
    media='screen' href='position.css'> }
    </head>
    <body>
        <h1>Titre1</h1>
        <h1 id="t2">Titre2</h1>
        <h1>Titre3</h1>
       
    </body>
    </html>

    Position:absolute;
    <!DOCTYPE html> h1{
    <html>     border:solid;
    <head>     width:50%;
        <meta charset='utf-8'>     padding: 4%;
        <meta http-equiv='X-UA-Compatible'     text-align: center;
    content='IE=edge'>     margin: 4%;
        <title>Page Title</title> }
        <meta name='viewport' #t2{
    content='width=device-width, initial-     position:absolute;
    scale=1'>     top:00px;
        <link rel='stylesheet' type='text/css'     left:00px;
    media='screen' href='position.css'>     color:red;
    </head> }
    <body> #c1{
        <div id="c2">     border:solid;
            <div id="c1">     margin:40px;
                <h1>Titre1</h1>     - - - - - - - - - - -
                <h1 id="t2">Titre2</h1>
                <h1>Titre3</h1> }
            </div> #c2{
        </div>    border:solid;
    </body>    margin:40px;
    </html> - - - - - - - - - - -
    }
    Position :fixed;
    <!DOCTYPE html> h1{
    <html>     border:solid;
    <head>     width:50%;
        <meta charset='utf-8'>     padding: 4%;
        <meta http-equiv='X-UA-Compatible'     text-align: center;
    content='IE=edge'>     margin: 4%;
        <title>Page Title</title> }
        <meta name='viewport' #t2{
    content='width=device-width, initial-     position:fixed;
    scale=1'>     bottom:0px;
        <link rel='stylesheet' type='text/css'     left:0px;
    media='screen' href='position.css'>     color:red;
    </head> }
    <body> #c1{
        <div id="c2">     border:solid;
            <div id="c1">     margin:40px;
                <h1>Titre1</h1> }
                <h1 id="t2">Titre2</h1> #c2{
                <h1>Titre3</h1>    border:solid;
            </div>    margin:40px;
        </div> }
        <p>
            lorem*22
        </p>
    </body>
    </html>
    Position:sticky
    <!DOCTYPE html>  body{
    <html>             margin:0px;
    <head>         }
        <meta charset='utf-8'>         .container{
        <meta http-equiv='X-UA-Compatible'             width:300px;
    content='IE=edge'>             border:solid blue 4px;
        <title>Page Title</title>             height: 200px;
        <meta name='viewport'             padding:0px;
    content='width=device-width, initial-            
    scale=1'>             margin-top:800px;
        <link rel='stylesheet' type='text/css'             margin-left: 200px;
    media='screen' href='position.css'>         }
    </head>         .elt{
    <body>             margin: 0px ;
        <div class="container">             width:30%;
            <div class="elt">             border:solid;
            Eelement             text-align: center;
            </div>             position:sticky;
        </div>             top:40px;
        <p>             left:40px;
        lorem*22         }
        </p>         .bande{
        <div class="bande">             width:2000px;
        </div>             height: 200px;
    </body></html>             background-color: red; }
    Exercice :
    Editer le code nécessaire en html et css3 pour avoir les box suivantes :

    Vous aimerez peut-être aussi