Scribd Logo
Upload

Welcome to Scribd!

  • 3rd Day

    Uploaded by

    Saurabh Choudhary
    17 views7 pages
    The document discusses different positioning techniques in CSS including static, fixed, relative, and absolute positioning. It also covers the use of z-index to control stacking order of overlapped elements and the opacity property to make elements transparent. Specific techniques covered include using positive and negative top/left values to move elements relatively, positioning elements absolutely within the first positioned parent, and setting opacity values between 0-1 to adjust transparency. Mouseover events can also change element opacity on hover.

    Original Description:

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document discusses different positioning techniques in CSS including static, fixed, relative, and absolute positioning. It also covers the use of z-index to control stacking order of overlapped elements and the opacity property to make elements transparent. Specific techniques covered include using positive and negative top/left values to move elements relatively, positioning elements absolutely within the first positioned parent, and setting opacity values between 0-1 to adjust transparency. Mouseover events can also change element opacity on hover.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    17 views7 pages

    3rd Day

    Uploaded by

    Saurabh Choudhary
    The document discusses different positioning techniques in CSS including static, fixed, relative, and absolute positioning. It also covers the use of z-index to control stacking order of overlapped elements and the opacity property to make elements transparent. Specific techniques covered include using positive and negative top/left values to move elements relatively, positioning elements absolutely within the first positioned parent, and setting opacity values between 0-1 to adjust transparency. Mouseover events can also change element opacity on hover.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 7

    Positioning

    Static: Static positioned elements are not affected by the top, bottom, left, and right
    properties.

    Fixed: An element with fixed position is positioned relative to the browser window.

    <html>

    <head>

    <style>

    position:fixed;

    top:30px;

    right:5px;

    </style>

    </head>

    <body>

    <p>Some more text</p>

    <body>

    </html>
    A relative positioned element is positioned relative to its normal position. Relative
    positioning changes the position of the HTML element relative to where it normally
    appears.

     Move Left - Use a negative value for left.


     Move Right - Use a positive value for left.
     Move Up - Use a negative value for top.
     Move Down - Use a positive value for top.

    An absolute position element is positioned relative to the first parent element that
    has a position other than static.. absolute is positioned at the specified coordinates
    relative to your screen top left corner

     Move Left - Use a negative value for left.


     Move Right - Use a positive value for left.
     Move Up - Use a negative value for top.
     Move Down - Use a positive value for top.

    The z-index property specifies the stack order of an element . the z-index property to


    elements that overlap with each other

    <html>

    <body>

    <div style="background-color:yellow;

    width:850px;

    height:50px;

    position:absolute ;

    top:40px;

    left:290px;
    z-index:3;

    margin:0px auto;">

    </div>

    <div style="background-color:black;

    width:980px;

    height:300px;

    position:relative;

    top:-60px;

    left:35px;

    z-index:1;

    margin:0px auto;">

    </div>

    </body>

    </html>

    Image Opacity and Transparency

    The opacity property can take a value from 0.0 - 1.0. A lower value makes the element
    more transparent.

    <html>

    <head>
    <style type="text/css">

    #img1

    opacity:0.4;

    filter:alpha(opacity=40);

    </style>

    </head>

    <body>

    <img src="index.jpg"><br/><br/>

    <img src="index.jpg" id="img1">

    </body>

    </html>

    Mouse over the images

    <html>

    <head>

    <style type="text/css">

    img

    opacity:0.4;

    filter:alpha(opacity=40);
    }

    img:hover

    opacity:1.0;

    filter:alpha(opacity=100);

    </style>

    </head>

    <body>

    <img src="index.jpg"><br/>

    <br/>

    <img src="index.jpg" id="img1">

    </body>

    </html>

    <html>

    <head>

    <style>

    div.background

    width:500px;

    height:300px;

    background:url(index.jpg) repeat;

    border:2px solid black;


    }

    div.transbox

    width:400px;

    height:250px;

    margin:30px 50px;

    background-color:#ffffff;

    border:1px solid black;

    opacity:0.6;

    filter:alpha(opacity=60);

    div.transbox p

    margin:30px 40px;

    font-weight:bold;

    color:#000000;

    </style>

    </head>

    <body>

    <div class="background">

    <div class="transbox">
    <p>CSS stands for Cascading Style Sheet. CSS is used to control the style of a web
    document in a simple and easy way. CSS to control the style and layout of multiple
    Web pages all at once. Cascading Style Sheets, fondly referred to as CSS, is a simple
    design language intended to simplify the process of making web pages
    presentable .CSS is created and maintained through a group of people within

    the W3C called the CSS Working Group

    </p>

    </div>

    </div>

    </body>

    </html>

    You might also like