### top属性需要和absolute绑定使用1. 如果一个元素设置了top和left属性,且本身设置了position属性,值为absolute或者relative效果是:以距离它最近的position属性为absolute或relative的父元素进行偏移,如果没有这样的父元素,则以body元素进行偏移.例如:```.father { width:1000px; height: 1000px; position: relative;<!--必须设置,也可为absolute,下同--> background-color: blue;}.son { width:333px; height: 333px; background-color: white; top:166px; left: 66px; position: relative;<!--必须设置-->}```### margin和absolute同事存在 顺便说下,如果我们在给一个元素同时设置了margin和position值时,可能会出现margin不生效的状况```.father { width:1000px; height: 1000px; position: absolute; background-color: blue; margin:0 auto;}```此时,father类所对应元素的margin效果是不生效的.因为* 绝对定位absolute是根据它的祖先元素(最近一个设置了position属性的上级元素)利用设置top和left属性来进行偏移.* margin则是根据它的父元素来进行偏移### 总结也就是说 * 如果一个元素设置了position属性,那么它的偏移就该用top,left来设置 * 如果想要让它相对与父元素偏移,则父元素也要设置position属性,如果没有其他需要的话,建议用relative * 如果本元素设置了position属性为absolute后,margin的设置就无效了 * 要想本元素的margin生效,那么自己的position属性应该设置为relative

The article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati

The article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159

The article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex

The article discusses the viewport meta tag, essential for responsive web design on mobile devices. It explains how proper use ensures optimal content scaling and user interaction, while misuse can lead to design and accessibility issues.

The article discusses using HTML5 form validation attributes like required, pattern, min, max, and length limits to validate user input directly in the browser.

This article explains the HTML5 <time> element for semantic date/time representation. It emphasizes the importance of the datetime attribute for machine readability (ISO 8601 format) alongside human-readable text, boosting accessibilit

Article discusses best practices for ensuring HTML5 cross-browser compatibility, focusing on feature detection, progressive enhancement, and testing methods.

The article discusses the <iframe> tag's purpose in embedding external content into webpages, its common uses, security risks, and alternatives like object tags and APIs.


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

SublimeText3 Chinese version
Chinese version, very easy to use

MinGW - Minimalist GNU for Windows
This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.

Zend Studio 13.0.1
Powerful PHP integrated development environment

SublimeText3 Mac version
God-level code editing software (SublimeText3)

WebStorm Mac version
Useful JavaScript development tools