Implement floating layer effect under css

高洛峰
Release: 2016-11-24 14:29:41
Original
2754 people have browsed it

Definition and Usage

The position attribute specifies the positioning type of the element.

Description

This attribute defines the positioning mechanism used to establish the layout of the element. Any element can be positioned, but absolute or fixed elements generate a block-level box, regardless of the type of the element itself. A relatively positioned element is offset from its default position in normal flow.

Default:

static

Inheritance:

no

Version:

CSS2

JavaScript syntax:

object.style.position= "absolute"

Example

Positioning h2 element:

h2
{position:absolute;left:100px;
top:150px;
}

TIY

Browser support

All major browsers Support position attribute.

Note: The attribute value "inherit" is not supported in any version of Internet Explorer (including IE8).

Possible values

Value

Description

absolute

Generates an absolutely positioned element, positioned relative to the first parent element other than static positioning.

The position of the element is specified through the "left", "top", "right" and "bottom" attributes.

fixed

Generate absolutely positioned elements, positioned relative to the browser window.

The position of the element is specified through the "left", "top", "right" and "bottom" attributes.

relative

Generates a relatively positioned element, positioned relative to its normal position.

So "left:20" will add 20 pixels to the element's LEFT position.

static Default value. Without positioning, the element appears in normal flow (ignoring top, bottom, left, right or z-index declarations).

inherit

specifies that the value of the position attribute should be inherited from the parent element.

inherit Implement floating layer effect under css


Related labels:
css
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template