Home > Developer > Web Develop

Reproduced CSS Tutorial: example explaining positioning position

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Http://www.missyuan.com/thread-395406-1-1.html

1. position:static

The default positioning for all elements is: position:static, which means that the element is not positioned and appears in the document where it should be.

In general, you do not have to specify position:static unless you want to overwrite previously set positioning.

#div-1 {position:static;}

2. position:relative

If you set position:relative, you can use Top,bottom,left and right to move this element relative to where the element should appear in the document. "means that the element actually still occupies the original position in the document, but is visually moved relative to its original position in the document."

#div-1 {position:relative; top:20px; left:-40px;}

3. Position:absolute

When Position:absolute is specified, the element is detached from the document "that is no longer in position in the document" and can be positioned exactly as set top,bottom,left and right.

#div -1a {position:absolute; top:0; right:0; width:200px;}

4. Position:relative + Position:absolute

If we set relative positioning for Div-1, then all elements within the Div-1 will be positioned relative div-1. If you set absolute positioning for div-1a, you can move the div-1a to the top right of the Div-1.

#div-1 {position:relative;} #div -1a {position:absolute; top:0; right:0; width:200px;}

5. Two column absolute positioning

You can now use relative positioning and absolute positioning to make a two-column layout.

#div-1 {position:relative;} #div -1a {position:absolute; top:0; right:0; width:200px;} #div -1b {position:absolute; top:0; left:0; width:200px;}

6. Two column absolute positioning height

One option is to set a fixed height for the element. However, this approach is not suitable for most designs because we do not know how much text will be in the element, or the exact font size to be used.

#div-1 {position:relative; height:250px;} #div -1a {position:absolute; top:0; right:0; width:200px;} #div -1b {position:absolute; top:0; left:0; width:200px;}

7. Floating

For variable height columns, absolute positioning doesn't work, and here's another scenario.

We can float an element so that it moves to the left/right, and it is text that surrounds it. This is primarily used for images, but here we use it for a complex layout task (because this is our only tool).

#div -1a {float:left; width:200px;}

8. Floating Columns

If we float an element to the left and float the second element to the left, they will push up against every other.

#div -1a {float:left; width:150px;} #div -1b {float:left; width:150px;}

9. Clear Floating Columns

After floating the element, we can clear the float so that the other elements are positioned correctly.

#div -1a {float:left; width:190px;} #div -1b {float:left; width:190px;} #div -1c {clear:both;}

Although I always use floating layout, but Master good position is also necessary, in fact, it is not so difficult ...

<!DOCTYPE HTML Public"-//W3C//DTD HTML 4.01 transitional//en"
"Http://www.w3.org/TR/html4/loose.dtd">
<Html>
<Head>
<Meta HTTP-Equiv="Content-type"Content="text/html; charset=gb2312">
<Title>Untitled Document</Title>
<STYLE TYPE="Text/css">
Body {
Font-Family:tahoma, Helvetica, Arial, sans-Serif
Font-size:12px;
Padding0;

Text-Align:center;
Background-color:#000000;

}
#Divbody {
width:1000px;
height:900px;
Margin:auto;
}
#div-Before {
Width100%;
height:20px;
Background-Color: #FF0000;
}
#div-After {
Width100%;
height:20px;
Background-Color: #FD0000;
}
#div-1{
Width100%;
height:500px;
Background-color:#999999;
position:relative;

}
#div-1a {
width:200px;
Background-Color: #3300FF;
Float: Left;

}
#div-1b {
width:300px;
height:250px;
Background-Color: #66FF00;

}
#div-1c {
width:100px;
height:250px;
Background-Color: #00FFFF;
Margin:auto;

}
</STYLE>
</Head>

<Body>
<Div ID=Divbody>
<Div ID=Div-Before>#div-Before</Div>
<Div ID=Div-1>
<Div ID=Div-1a>Based on aTrueStories, the Chinese ballet which made its premiereInch1964Based on aTrueStories, the Chinese ballet which made its premiereInch1964Based on aTrueStories, the Chinese ballet which made its premiereInch1964Depicts the liberation of a peasant girl on Hainan Island. The classic ballet'll be performed by the Chinese Central Ballet troupeInchGuangzhouInchJune.
</Div>
<Div ID=Div-1b>Based on aTrueStories, the Chinese ballet which made its premiereInch1964Depicts the liberation of a peasant girl on Hainan Island. The classic ballet'll be performed by the Chinese Central Ballet troupeInchGu.
</Div>
<div id=div-1c>based on a true story, the Chinese ballet which made it premiere in 196        4 depicts the liberation of a PEAS.D. </div> </div> <div id=div-after> #div-after</div></div></body>

Reproduced CSS Tutorial: example explaining positioning position

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
css position center of screen css selector tutorial css transition tutorial sass css tutorial dreamweaver css tutorial less css tutorial w3c css tutorial

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.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More