Layout DIV using position attribute-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

Layout DIV using position attribute

怪我咯

Jun 22, 2017 am 10:36 AM

div layoutposition

Relative positioning and Absolute positioning

##Positioning tag: position Contains attributes : relative (relative) absolute (absolute)
1.position:relative; If an element is positioned relatively, first it will appear at its location. Then move the element "relative to" its original starting point by setting a vertical or horizontal position. (One more point, when positioned relatively, the element still occupies the original space regardless of whether it is moved. Therefore, moving the element will cause it to cover other boxes)

2.position:absolute; means absolute positioning, The position will be calculated starting from the upper left corner of the browser. Absolute positioning takes the element out of the document flow so it doesn't take up space. Elements in normal document flow are laid out as if absolutely positioned elements were not present. (Because absolutely positioned boxes have nothing to do with document flow, they can cover other elements on the page and their hierarchical order can be controlled via

z-index. The higher the z-index value, the more visible it is. In the upper layer.)

3. After the parent container uses relative positioning and the child element uses absolute positioning, the position of the child element is no longer relative to the upper left corner of the browser, but relative to the upper left corner of the parent window

4. Relative positioning and absolute positioning need to be used with top, right,

bottom, and left to locate the specific position. These four attributes only take effect after the element is positioned, and are invalid in other cases. In addition, these four attributes can only use two adjacent ones at the same time. You cannot use up and down at the same time, or use left and right at the same time.

The following is the relative absolute layout of multiple ps within a p:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html>
  <head>
    <title>testp.html</title>
    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3" />
    <meta http-equiv="description" content="this is my page"/>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    
    <script type="text/javascript">
        window.onload = function(){
            document.getElementById("myp").style.height = "200px";
        };    </script>
  </head>
  
  <body>
      关键因素：外层加position:relative,里面的p使用position: absolute，<br />
      但这种方法的问题有：外层的p必须指定具体的height，高度不能使用百分比   <!--  <p style="position:relative;width: 600px;height:500px;">
        <p style="width: 100px;height: 50px; position: absolute;right:10px;bottom: 10px"></p>
    </p> -->
    
     <p id="myp" style="position:relative;width: 100%;height:auto;">
        <p style="width: 100px;height: 50px; position: absolute;right:10px;bottom: 10px"></p>
        <p style="width: 100px;height: 50px; position: absolute;left:10px;bottom: 10px"></p>
    </p>
  </body></html>

Rendering:

The above is the detailed content of Layout DIV using position attribute. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

How Many Websites Should We Build?Apr 13, 2025 am 10:42 AM

Someone emailed me:

Gatsby and WordPressApr 13, 2025 am 10:39 AM

Gatsby and WordPress is an interesting combo to watch. On one hand, it makes perfect sense. Gatsby can suck up data from anywhere, and with WordPress having a

How to Get the Current Page URL in GatsbyApr 13, 2025 am 10:37 AM

This seemingly simple task had me scratching my head for a few hours while I was working on my website. As it turns out, getting the current page URL in

How I've Improved as a Web Developer (and a Person) in 2019Apr 13, 2025 am 10:35 AM

We’re sliding into the roaring twenties of the twenty-first century (cue Jazz music ?). It’s important that you and I, as responsible people, follow

Is 'is' Useful?Apr 13, 2025 am 10:31 AM

God I'm funny.

Dip Your Toes Into Hardware With WebMIDIApr 13, 2025 am 10:30 AM

Did you know there is a well-supported browser API that allows you to interface with interesting and even custom-built hardware using a mature protocol that

PHP Templating in Just PHPApr 13, 2025 am 10:20 AM

With stuff like template literals in JavaScript and templating languages, like JSX, I've gotten used to wanting to write my HTML templates in one nice chunk

How to Build Your Resume on npmApr 13, 2025 am 10:12 AM

Just yesterday, Ali Churcher shared a neat way to make a resume using a CSS Grid layout. Let’s build off that a bit by creating a template that we can spin up

See all articles

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Best Graphic Settings

3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle Solution

2 weeks agoByDDD

R.E.P.O. How to Fix Audio if You Can't Hear Anyone

3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

WWE 2K25: How To Unlock Everything In MyRise

4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

MinGW - Minimalist GNU for Windows

This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.