CSS base--display (display) and Visibility (visibility) and position (positioning)

Source: Internet
Author: User

First of all, I need to say a little bit about display:none; and Visibility:hidden; the difference between the two

Simply put, when using Display:none, the tag that uses it does not occupy space on the page.

and Visibity:hidden, which part of the blank area will be left on the page.

Display can change inline elements and block elements, and vice versa, to make the page appear to be combined in a particular way and still adhere to web standards.

The following example shows a list item as an inline element:

1 Li {2   display:inline:3 }

The following example takes a span element as a block element:

1 span 2   {3  display:block;  4 }

Position (positioning)

CSS positioning properties allow you to position a single element. It can also put an element behind another element and specify what should happen when the content of an element is too large.

Elements can be positioned using the top, bottom, left, and right properties. However, these properties do not work unless the Position property is set first. They also have different ways of working, depending on the location method.

Fixed positioning

The position of the element relative to the browser window is a fixed position.

It does not move even if the window is scrolled:

Div {  position:fixed;   top:30px;   Right:30px;}

Note:fixed positioning makes the position of an element independent of the document flow and therefore does not occupy space.

Fixed positioned elements overlap with other elements.

Relative positioning

Relative positioning elements are positioned relative to their normal positions.

Examples are as follows:

1 <!DOCTYPE HTML>2 <HTML>3 <Head>4 <style>5 H2.pos_left6 {7 position:relative;8  Left:-20px;9 }Ten  One H2.pos_right A { - position:relative; -  Left:20px; the } - </style> - </Head> -  + <Body> - <H2>This was a heading with no position</H2> + <H2class= "Pos_left">This heading was moved left according to its normal position</H2> A <H2class= "Pos_right">This heading was moved right according to its normal position</H2> at <P>Relative positioning moves an element Relative to its original position.</P> - <P>The style "left:-20px" subtracts pixels from the element ' s original left position.</P> - <P>The style "left:20px" adds pixels to the element ' s original left position.</P> - </Body> -  - </HTML> in             

Absolute positioning

The position of an absolutely positioned element is relative to the nearest positioned parent element, if the element has no positioned parent element, then its position is relative to

1 H2 2 {3position:absolute; 4 left:100px; 5 top:150px; 6 }
Overlapping elements

Elements are positioned independently of the document flow, so they can overwrite other elements on the page

The Z-index property sets the stacking order of an element (which element should be placed before, or after) a negative number that is placed behind, and a positive number indicates that it is placed in front.

An element can have a stacked order of positive or negative numbers:

1 img {2  position:absolute;  3  left:0px;  4  top:0px;  5  z-index:-1}

Pseudo-Class:

Navigation bar:

1 <!DOCTYPE HTML>2 <HTML>3 <Head>4 <style>5 ul6 {7 List-style-type:None;8 margin:0;9 padding:0;Ten Overflow:Hidden; One } A Li - { - float: Left; the } - a:link,a:visited - { - Display:Block; + width:120px; - Font-weight:Bold; + Color:#FFFFFF; A Background-color:#98bf21; at text-align:Center; - padding:4px; - text-decoration:None; - Text-transform:Uppercase; - } - a:hover,a:active in { - Background-color:#7A991A; to } +  - </style> the </Head> *  $ <Body>Panax Notoginseng <ul> - <Li><ahref= "#home">Home</a></Li> the <Li><ahref= "#news">News</a></Li> + <Li><ahref= "#contact">Contact</a></Li> A <Li><ahref= "#about">About</a></Li> the </ul> + </Body> - </HTML>            

As follows:

Transparency:

After clicking, you can restore the original image.

Img{opacity:0.4;filter:alpha (opacity=40);/* for IE8 and earlier */}img:hover{opacity:1.0;filter:alpha (opacity=100); /* for IE8 and earlier */}

CSS base--display (display) and Visibility (visibility) and position (positioning)

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.