javascript - HTML 레이아웃 문제

Question

위치:절대 속성을 잘 이해하지 못합니다. 누군가 답변을 제공할 수 있기를 바랍니다.

여기에서 자식 p에 대해 position:absoulte를 설정했는데 그 결과 부모 p가 차지했던 공간이 사라졌습니다

으아아아

으아아아

Answer 1

요소를 절대값으로 설정하면 이미 문서 흐름에서 벗어났기 때문입니다. 상위 요소 내부의 공간을 차지하지 않습니다

Answer 2

첫 번째 예에서는 상위 요소에 높이가 설정되지 않았고 하위 요소에도 높이가 없으므로 표시되지 않습니다.

으아악

문서 흐름과 분리된 절대 위치 지정이며, 위/오른쪽/아래/왼쪽 및 기타 값을 설정하지 않았으므로 동일한 레벨의 두 p가 겹칩니다

Answer 3

CSS의 네 가지 위치 지정 방법:

1. static: 기본 위치 지정(예: 위치 지정 없음, 위치 지정은 문서 흐름 배열 방식에 따라 다름)

2. relative: 상대 위치 지정, 원래 위치를 기준으로 한 위치 지정, 소위 원래 위치, 즉 relative：相对定位，相对于原始位置定位，所谓的原始位置，即staticpositioning

의 위치

3. 절대: 절대 위치 지정, absolute：绝对定位，相对于static定位以外的第一个父元素定位。从当前元素开始向上查找定位元素直至根元素，无论遇到的第一个父级元素是relative还是absolute，或者是fixed定位的元素，当前元素就相对于该元素进行定位，并且这个父级元素不一定是当前元素的第一级父元素。如果没有找到任何非static的父级元素，则相对于根元素html위치 지정 이외의 첫 번째 상위 요소를 기준으로 위치 지정. 발견된 첫 번째 상위 요소가 상대인지 절대인지 또는

   위치 요소인 현재 요소인지 여부에 관계없이 현재 요소에서 루트 요소까지 위쪽에 위치된 요소를 검색합니다. 요소를 기준으로 위치가 지정되며 이 상위 요소가 반드시 현재 요소의 첫 번째 수준 상위 요소일 필요는 없습니다.
상위 요소가 아닌 요소가 없으면 루트 요소 html를 기준으로 위치가 지정됩니다.

4. fixed

: 브라우저 창 위치를 기준으로 고정된 위치

초보분들은 위 사항만 기억하시면 됩니다.

w3school에 따르면:

절대 위치 지정으로 설정된 요소 상자
는 문서 흐름에서 완전히 제거되고
포함 블록(문서의 다른 요소 또는 초기 포함 블록일 수 있음)을 기준으로 위치가 지정됩니다.

절대적으로 배치된 요소는 가장 가까운 위치에 있는 조상 요소를 기준으로 배치됩니다. 요소에 배치된 조상 요소가 없으면 해당 위치는 원래 포함 블록을 기준으로 합니다.

절대 위치 지정은 요소의 위치를 ​​문서 흐름과 독립적으로 만들어 공간을 차지하지 않습니다.

relative的元素。（应该去查下w3c...衰）
什么是包含块？
containing block
css 包含块(Containing Box)
包含块是浏览器计算元素位置的一个虚拟的矩形区域，计算元素定位的起始位置是该矩形区域的左上角，也就是原点，坐标位置为(0,0)，定位元素的top、left
인용문에서 정확한 명령문은 "가장 가까운 위치의 포함 블록 또는 초기 포함 블록에 상대적"이어야 한다고 생각합니다. 왜냐하면 명령문이 "포함 블록에 상대적"이라면 왜 적어도 relative여야 하기 때문입니다. < /code> 요소. (w3c를 확인해야 합니다...)

격납 블록이 무엇인가요?

포함 블록css 포함 상자 포함 블록은 브라우저가 요소의 위치를 ​​계산하는 데 사용하는 가상의 직사각형 영역입니다. 요소 위치 계산의 시작 위치는 원점인 직사각형 영역의 왼쪽 상단이며, 좌표 위치가 (0,0)인 경우 위치가 지정된 요소의 상단과 왼쪽은 원점을 기준으로 결정됩니다. 컨테이닝 블록은 요소 위치 지정을 위한 참조 프레임입니다.

이 직사각형 영역을 그것을 만든 요소라고 생각하면 되지만 이 요소는 아니고 그냥 가상의 것입니다. 🎜 으아악 🎜🎜컨테이닝 블록은 요소의 위치와 크기를 계산하는 데 사용됩니다. 🎜🎜

부모 요소가 차지하는 공간은 왜 사라지나요?

구성으로 position: absolute的元素脱离了文档流（normal flow），形成了独立的BFC。
页面中每个BFC都是独立的一块渲染区域，互不影响，但是它的位置信息，依然由它在normal flow中的包含块决定。
所谓的流就是浏览器将元素在浏览器视口从上到下，从左到右一个一个的排版渲染出来，形成的一个类似水流一样 的概念。
默认一个页面只有一个“流”，就是文档流（normal flow），如果页面有定位元素、浮动元素，就会形成定位流、浮动流，而normal flow由文档的根元素html설정되어 있기 때문이죠.
흐름을 데스크탑에 쌓인 종이 조각으로 생각할 수 있지만, 각 종이 조각은 "흐름"이지만 이러한 종이가 반드시 같은 크기는 아닙니다.

BFC에 대한 나의 이해 - wmsj100

Answer 4

1. 기본 상위 요소에는 고정된 너비와 높이가 없습니다.
2. 하위 요소가 떠 있으면 문서 흐름에서 벗어나 상위 요소를 열 수 없으므로 상위 요소가 사라집니다.

Answer 5

여기서는 절대 위치 지정과 부동을 혼합하는데, 이는 초보자가 이해하기 쉽지 않습니다. 이해하기 쉽도록 이 둘을 분리해야 합니다.

절대 위치 지정을 사용할 때 다음 사항에 유의하세요.

으아악

플로팅 플로트에 대한 이해는 별도로 바이두를 참고해주세요~

Answer 6

부모의 너비와 높이를 설정해도 공간은 그대로 유지됩니다