Home > Developer > Web Develop
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 positioningThe 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 positioningRelative 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 }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)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
