Shulou(Shulou.com)06/02 Report--

This article mainly explains "what are the details of the positioning layout in CSS". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn what are the details of the positioning layout in CSS.

1.   relative positioning 1.1) what is relative positioning

Relative positioning: the box can be positioned according to its original position (through location descriptors).

Location description:

Left: move right; right move left; top move down; bottom move up

(when the inner face value is negative, move in the opposite direction)

For example:

It turns out:

Relative positioning * {margin: 0; padding: 0;} p {width: 500px; height: 500px; border: 1px solid # 000; margin: 50px auto;} p {width: 100px; height: 100px; background-color: lightblue Position: relative; top: 50px; left: 50px;}

Set p to relative positioning:

P {width: 100px; height: 100px; background-color: lightblue; position: relative; top: 50px; left: 50px;}

1.2) the nature and use of relative positioning

Nature

The relative positioning elements are essentially still in the original position, but render in a new place and will not affect the other elements of the page.

Use

Used to fine-tune the position of elements

The relative positioning box can be used as a reference box for absolute positioning.

For example:

Relative positioning * {margin: 0; padding: 0;} nav {width: 780px; height: 50px; margin: 40px auto;} nav ul {list-style: none;} nav ul li {float: left; width: 156px Height: 50px; line-height: 50px; text-align: center;} nav ul li a {display: block; width: 156px; height: 50px; background-color: lightcyan; color: # 000; text-decoration: none } nav ul li a:hover {border-top: 3px solid red } Navigation one navigation two navigation three navigation four navigation five

The effect at this time is as follows:

You will find that when the mouse hovers over it, the navigation area will sink.

After we set the relative positioning and fine-tune it:

Nav ul li a:hover {border-top: 3px solid red; position: relative; top:-3px;}

This will solve the problem just now.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.