목차
回复讨论(解决方案)
웹 프론트엔드 HTML 튜토리얼 关于相对定位和绝对定位_html/css_WEB-ITnose

关于相对定位和绝对定位_html/css_WEB-ITnose

Jun 24, 2016 pm 12:24 PM

关于相对定位和绝对定位

1.怎么来理解这两个呢,
感觉别人问的时候总是说不清楚啊,
2.到底啥时候用相对定位,啥时候用绝对定位啊~



回复讨论(解决方案)

关于相对定位和绝对定位

1.怎么来理解这两个呢,
感觉别人问的时候总是说不清楚啊,
2.到底啥时候用相对定位,啥时候用绝对定位啊~

可以这样理解不,

相对定位是相对于元素原来的位置进行移动,
元素移动后,其原来占用的位置会保留,不脱离文档流。

绝对定位是相对于父级来进行绝对定位的,且移动后,元素原来占用的位置不会被保留,脱离文档流。


关于相对定位和绝对定位

1.怎么来理解这两个呢,
感觉别人问的时候总是说不清楚啊,
2.到底啥时候用相对定位,啥时候用绝对定位啊~

可以这样理解不,

相对定位是相对于元素原来的位置进行移动,
元素移动后,其原来占用的位置会保留,不脱离文档流。

绝对定位是相对于父级来进行绝对定位的,且移动后,元素原来占用的位置不会被保留,脱离文档流。

绝对定位是相对于父级或者上一级中第一个有position(绝对,相对定位的都可以)来进行绝对定位的,且移动后,元素原来占用的位置不会被保留,脱离文档流。

你好像很理解了啊,绝对定位从一开始就是脱离文档流的,不会影响主文档流的布局。

你好像很理解了啊,绝对定位从一开始就是脱离文档流的,不会影响主文档流的布局。

你好像很理解了啊,绝对定位从一开始就是脱离文档流的,不会影响主文档流的布局。

额,就是说的时候之前感觉说不出来,
还有那个盒子模型,我就知道有四个属性, padding(内边距)、marging(外边距)、border(边框)、content(内容)
其他的答不上来了。~

之前也有遇到过这样的问题,建议一般不要使用绝对布局,因为浏览器的盒模型的设置有些是不一样的,使用绝对布局的话,在不同的浏览器上实现,很有可能出现错位现象

相对定位:相对我现在的位置进行的定位
绝对定位:我一定要定在这个位置

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

뜨거운 기사 태그

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

공식 계정 웹 페이지의 캐싱 업데이트에 어려움 : 버전 업데이트 후 사용자 경험에 영향을 미치는 이전 캐시를 피하는 방법은 무엇입니까? 공식 계정 웹 페이지의 캐싱 업데이트에 어려움 : 버전 업데이트 후 사용자 경험에 영향을 미치는 이전 캐시를 피하는 방법은 무엇입니까? Mar 04, 2025 pm 12:32 PM

공식 계정 웹 페이지의 캐싱 업데이트에 어려움 : 버전 업데이트 후 사용자 경험에 영향을 미치는 이전 캐시를 피하는 방법은 무엇입니까?

HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까? HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까? Mar 17, 2025 pm 12:27 PM

HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까?

& lt; iframe & gt; 꼬리표? 보안을 사용할 때 보안 고려 사항은 무엇입니까? & lt; iframe & gt; 꼬리표? 보안을 사용할 때 보안 고려 사항은 무엇입니까? Mar 20, 2025 pm 06:05 PM

& lt; iframe & gt; 꼬리표? 보안을 사용할 때 보안 고려 사항은 무엇입니까?

웹 페이지의 PNG 이미지에 뇌졸중 효과를 효율적으로 추가하는 방법은 무엇입니까? 웹 페이지의 PNG 이미지에 뇌졸중 효과를 효율적으로 추가하는 방법은 무엇입니까? Mar 04, 2025 pm 02:39 PM

웹 페이지의 PNG 이미지에 뇌졸중 효과를 효율적으로 추가하는 방법은 무엇입니까?

& lt; meter & gt의 목적은 무엇입니까? 요소? & lt; meter & gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:35 PM

& lt; meter & gt의 목적은 무엇입니까? 요소?

HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까? HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까? Mar 17, 2025 pm 12:20 PM

HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까?

& lt; datalist & gt의 목적은 무엇입니까? 요소? & lt; datalist & gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:33 PM

& lt; datalist & gt의 목적은 무엇입니까? 요소?

내비게이션 및 SEO에 HTML 링크를 효과적으로 사용하려면 어떻게합니까? 내비게이션 및 SEO에 HTML 링크를 효과적으로 사용하려면 어떻게합니까? Mar 18, 2025 pm 02:39 PM

내비게이션 및 SEO에 HTML 링크를 효과적으로 사용하려면 어떻게합니까?

See all articles