CSS three common positioning by setting position positioning

Source: Internet
Author: User

CSS can be set to the element by setting a position property value, so that different elements will be displayed in different locations, or fixed display in a certain location, or displayed on a layer of page.

The value of the position can be set to relative,absolute,fixed,static.

Two blocks are defined in the HTML code:

1 <  class= "box">2     <class= "Box1"></div>3</Div  >

1. Relative positioning:

1{2    width: 50px;  3    height: 50px;  4    position: relative;  5    top: 50px;  6    left: 10px;  7 }

The code above will be implemented to move the box to the right of the original box position 50px, moving downward 10px.

2. Absolute positioning:

1{2    width: 10px;  3    height: 20px;  4    position: absolute;  5    top: 10px;  6    left: 10px;  7 }

The above code will implement the position of the box1 at the current viewport position as the origin of the base position to move the corresponding distance;

If the parent of Box1 is set to relative, then Box1 will be shifted at the origin of box.

1 . Box{2 position:relative;3}4 . Box1{5 width:10px;6 Height:20px;7 position:Absolute;8 Top:10px;9  Left:10px;Ten}

3. Fixed positioning:

1{2    width: 50px;  3    height: 50px;  4    position: fixed;  5    top: 20px;  6    left: 0px;  7 }

The above code will secure the box to the left edge of 20px at the top of the window.

Use note points:

1. Absolute positioning will leave the element out of the document flow, and the element behind the anchor element will move to the position of the element to fill the blank area;

2. Under normal circumstances, absolute positioning will be used in conjunction with Ixnagdui;

3. When using fixed and absolute, be sure to identify who is the base position.

Example: The implementation displays the picture in a fixed position (not the top or bottom) of the window, and does not change the relative position of the element with the zoom of the windows.

1 <Divclass= "Aside-cover">2     <Divclass= "Cover">3          <Divclass= "Aside-left">4               <imgsrc= "Img/batlogox.png"alt= "Left"/>5          </Div>6     </Div>7 </Div>
. Cover{width:500px;Height:364px;margin:Auto;position:relative;}/*second-level sub-absolute positioning*/. Aside-left{width:60px;Height:94px;position:Absolute;Top:422px; Left:-0.2%;Overflow:Hidden;}/*Image relative positioning*/. Aside-left img{position:relative; Left:-64px;Top:-125px;}

The above code enables you to display the image content area you want to display in a fixed position in the window.


CSS three common positioning by setting position positioning

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.