Home > Web Front-end > Front-end Q&A > How to use css left attribute

How to use css left attribute

青灯夜游
Release: 2019-05-30 14:46:45
Original
3229 people have browsed it

The left attribute is a positioning attribute of CSS, which is used to specify the left edge of the element. It defines the offset between the left margin boundary of the positioned element and the left boundary of its containing block. If the value of the "position" property is "static", then setting the "left" property has no effect.

How to use css left attribute

#How to use the css left attribute?

The left attribute specifies the left edge of the element. This property defines the offset between the left margin edge of the positioned element and the left edge of its containing block.

Syntax:

left: auto|%|length|inherit;
Copy after login

Attribute value:

● auto: default value. Calculate the position of the left edge through the browser.

● %: Sets the left position as a percentage of the containing element. Negative values ​​can be used.

● Length: Use px, cm and other units to set the left position of the element. Negative values ​​can be used.

● Inherit: Specifies that the value of the left attribute should be inherited from the parent element.

Note: All major browsers support the left attribute. The attribute value "inherit" is not supported in any version of Internet Explorer (including IE8).

css left attribute example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style type="text/css">
img
{
  position:absolute;
  left:100px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<img  src="https://img.php.cn/upload/article/000/005/656/5af270fd37755429.jpg" / alt="How to use css left attribute" >
</body>
</html>
Copy after login

Rendering:

How to use css left attribute

The above is the detailed content of How to use css left attribute. For more information, please follow other related articles on the PHP Chinese website!

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