Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Feb 2006
    Location
    Japan
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question What character of html makes abs-positioned element cover *over* text that follows?

    That is, in the following 5 divs, 'Scenario' is trampled by the image, even though the text comes after the image in the source. Evidently there's a lower priority in rendering order for text even coming after an element that's absolutely positioned -- I was expecting it to overlie the image. Seeing the text written over was surprising, showing that order in the source doesn't matter so much as this other aspect of priority at work.

    What is that nature of html?


    The markup being:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <HTML><HEAD><STYLE>
    .red_line{	border:solid 1px #d55}
    .green_line{	border:dashed 1px #3c3}
    .red_line, .green_line{
    		position:relative; width: 300px}
    .txt{		font-size:13px; font-family:Tahoma; color: #456}
    </STYLE></HEAD><BODY class=txt>
    
    
    <DIV class=red_line>
    <div style="position:absolute"><img src="stone.jpg"></div>
    Scenario for May with preceding tile inside an abs-positioned div
    </div><br><br>
    
    <DIV class=green_line>
    <img src="stone.jpg"  style="position:absolute">
    <p>Scenario for June---phrase in p-tags with preceding tile an abs-positioned image</p>
    </div><br><br>
    
    <DIV class=red_line>
    <img src="stone.jpg"  style="position:absolute">
    <div>Scenario for July---phrase in its own div with the preceding tile an abs-pos image</div>
    </div><br><br>
    
    <DIV class=green_line>
    <div style="position:absolute"><img src="stone.jpg"></div>
    </div>
    Scenario for August with img inside a closed div preceding text<br>
    <br><br>
    
    <DIV class=red_line>
    <div style="position:absolute; width:36px; height:36px; background-color: #dde"></div>
    Scenario for September with preceding tile being a colored div<br>

  • #2
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    If you want to overlay the text on the image, I would set the image as a background image with no-repeat.

    Something like this perhaps:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
            <title></title>
            <style type="text/css">
                #myP {
                    background-image: url('pic1.jpg');
                    background-repeat: no-repeat;
                    height: 300px;  /* set to height of image */
                    border: 1px solid red;
                }
            </style>
            <script type="text/javascript"></script>
        </head>
        <body>
            <p id="myP">
                Tortor sit voluptatem pede sodales turpis hac, vel velit suscipit, luctus bibendum molestie lacinia neque. Porttitor ante 
                turpis in voluptate vivamus autem, gravida magna amet porta praesent tincidunt at, nam enim sodales ante non, sit nunc 
                posuere odio libero nibh ac. Amet id dignissim vehicula tempor et eros. Est hendrerit est quis, et viverra est class pede 
                voluptas libero, sed mauris tincidunt, ultrices praesent. Iaculis vivamus sapien id, lorem ante aliquet, commodo pede imperdiet 
                congue, dictum integer eget sed orci. Suscipit vitae quis, massa elit faucibus massa, interdum nam pharetra nulla sed, sollicitudin 
                egestas, magna viverra.
            </p>
        </body>
    </html>

  • #3
    New Coder
    Join Date
    Feb 2006
    Location
    Japan
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks webdev, actually getting type over the image is doable, but not the aim in posting. What I wanted to know was the underlying concept that makes the browser rendering come out that way. For example, is the principle

    "Any absolutely-positioned element will render on top of all other non-positioned elements that occupy the same page position, even if later occurring in the source, unless and until z-index attributes are used to specify a different layering"

    the rule that's being implemented? It's knowing the behaviors in principle that makes this work easier and more under control.

  • #4
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by code_stretch View Post
    What is that nature of html?
    I assume that you meant "What is this nature of CSS?" The answer to that is pretty simple: absolutely positioned content is painted with higher priority than non-positioned content.

    You can equalize the positioning-priority of the image and text by positioning the text. At that point, priority becomes based on document code order and the z-index property. Given equivalent z-index property values, the text, which appears later in the code, will be painted on top.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #5
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    Quote Originally Posted by code_stretch View Post
    Thanks webdev, actually getting type over the image is doable, but not the aim in posting. What I wanted to know was the underlying concept that makes the browser rendering come out that way.
    It's basically as Arbitrator described.

    Perhaps play around with the css in this demo and should be able to see how it works.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
            <title></title>
            <style type="text/css"></style>
            <script type="text/javascript"></script>
        </head>
        <body>
            <div style="position: relative">
                <!-- <img style="position: absolute; top: 0px; left: 0px" src="num1.jpg" alt="" /> -->
                <img style="position: absolute; z-index: 1;" src="num1.jpg" alt="" />
                <p style="position: absolute; z-index: 2;">
                Et elit nunc, aliquam rhoncus, cras ante est ac consequat, vitae lacinia curabitur pellentesque ipsum bibendum gravida. Arcu in nisl. 
                Vivamus etiam viverra morbi nunc, neque cras ut placerat id pulvinar eget, dolor vel pede nunc duis. Amet mi egestas porta, leo est 
                nec et, suscipit sed ipsum mauris vitae. Libero vulputate massa perspiciatis laborum ipsum, leo parturient dapibus accumsan, nec 
                viverra luctus a. Qui sit lorem scelerisque purus lectus, aptent habitant nunc turpis duis, malesuada a nam mi litora. Duis sapien 
                felis, eu aute quis, elit dignissim hymenaeos vel.
                </p>
            </div>
        </body>
    </html>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •