HTML / CSS 흐름에서 요소를 제거하는 방법은 무엇입니까?

HTML / CSS 흐름에서 요소를 제거하는 방법은 무엇입니까?

---

"position : absolute"가 "HTML / CSS의 흐름"에서 요소를 팝하고 이웃과의 상호 작용을 중지한다는 것을 알고 있습니다. 이를 달성하기위한 다른 방법은 무엇입니까?

---

없음?

내 말은으로 레이아웃에서 완전히 제거하는 것 외에는 display: none그게 다라고 확신합니다.

position: absolute실행 가능한 솔루션이 아닌 특정 상황에 직면하고 있습니까?

---

position:absolute더 맛있게 만드는 한 가지 트릭 은 부모를 만드는 것 position:relative입니다. 그러면 아이는 부모의 위치에 비해 '절대적'이 될 것입니다.

jsFiddle

---

또 다른 옵션은 height: 0; overflow: visible;요소 로 설정 하는 것이지만 실제로는 흐름 외부에 있지 않으므로 여백 축소 가 중단 될 수 있습니다 .

---

있다 display: none,하지만 난 그게 당신이 찾고있는 것보다 좀 더있을 것 같아요.

---

플로팅은 흐름을 재구성하지만 위치 : 절대는 문서의 흐름에서 완전히 제거하는 유일한 방법입니다.

---

position: fixed;또한 당신이 말했듯이 흐름에서 요소를 "팝"합니다. :)

position: absolute직위가 수반되어야합니다. 예 :top: 1rem; left: 1rem

position: fixed그러나 문서 흐름에 따라 일반적으로 나타나는 위치에 요소를 배치하지만 이후에는 이동하지 못하도록합니다. 또한 효과적으로 다음 요소가 위로 이동하도록 높이를 0px (dom과 관련하여)로 설정합니다.

position: fixed; z-index: 1다음 요소 위에 "팝"되도록 설정 (또는 필요한 모든 Z- 색인) 할 수 있기 때문에 매우 멋질 수 있습니다 .

예를 들어 스크롤 할 때 맨 위에있는 고정 위치 헤더에 특히 유용합니다.

---

이 질문이 몇 년 전이라는 것을 알고 있지만, 이미지와 같은 큰 요소가 div의 높이를 방해하지 않도록하는 것입니다.

나는 이미지가 div를 넘치도록하고 싶었지만 텍스트 문자열의 끝에 있기를 원했기 때문에 그것이 어디로 끝나는 지 몰랐습니다.

내가 알아 낸 해결책은 margin-bottom : -element 's height를 넣는 것이므로 이미지가 20px 높이이면

margin-bottom: -20px; vertical-align: top;

예를 들면.

그런 식으로 div 외부에 떠서 문자열의 마지막 단어 옆에 머물 렀습니다.

---

완전성을 위해 : float속성은 HTML의 흐름에서도 요소를 제거합니다. 예 :

float: right

---

이것을 사용해보십시오 :

position: relative;
clear: both;

당신이 사용할 때 인쇄 예를 들면, 절대 위치를 사용할 수 없을 때 나는 그것을 사용하는 page-break-after: always;미세 만에 작품 position:relative.

참고 URL : https://stackoverflow.com/questions/2993851/how-to-remove-an-element-from-the-flow-of-html-css