절대 위치 대 상대 CSS 위치

절대 위치 속성이있는 div입니다.절대 위치 대 상대 CSS 위치

<html> 
 
<head><title></title> 
 
<style type="text/css"> 
 
.mydiv 
 
{ 
 
position:absolute; 
 
background-color:red; 
 
min-width:150px; 
 
min-height:150px; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 
<div class="mydiv"></div> 
 
</body> 
 
</html>

상대 위치와 속성 DIV.

<html> 
 
<head><title></title> 
 
<style type="text/css"> 
 
.mydiv 
 
{ 
 
position:relative; 
 
background-color:red; 
 
min-width:150px; 
 
min-height:150px; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 
<div class="mydiv"></div> 
 
</body> 
 
</html>

제가 절대 사용했을 때 그때는 DIV의 최소 폭이 작동하지 않는 상대 위치와 ok.but있다. 절대 위치와 상대 위치 속성의 차이를 이해할 수 있으므로 차이 출력의 이유를 설명하십시오.

출처

2017-01-29 Rashed bin hares

내가 당신의 흥미있는 스레드에 대답 [여기] (https://www.begueradj.com/min-dimention-absolute-relative.html#min-dimention-absolute-relative) –

reference에 따르면 "절대 위치는지도에서 장소의 정확한 지점이지만 상대 위치는 다른 장소와 관련이있는 위치의 추정치입니다." 이것은 상대 div가 상위 div를 고려하지만 절대는 절대적으로 절대적인 것을 의미합니다. 나는이 질문의 의미를 이해하도록 귀하의 질문에 대한 해결책을 가지고 있습니다.

<html> 
    <head><title></title> 
    <style type="text/css"> 
    .mydiv 
    { 
    position:relative; 
    background-color:red; 
    min-width:150px; 
    min-height:150px; 
    } 
    .container{ 
     width:150px; 
     height:150px; 
    } 
    </style> 
    </head> 
    <body class="container"> 
    <div class="mydiv"></div> 
    </body> 
    </html>

출처

2017-01-29 05:50:50

답장을 보내 주셔서 감사합니다, 내 질문에 당신은 내 두 번째 파일 min-height 속성을 적용했지만 min-width.if 상대 위치 걸릴 상위 div 걸릴 볼 수 있습니다. 올바른 있지만 왜 min-height 속성 applied.is 상위 div가 없으므로 min-width로 적용하면 안됩니다. –

상대적으로 혼란스럽고 종종 오용됩니다. 먼저 상대적 요소 란 요소가 정상적으로 존재하는 위치와 상대적인 위치라는 것을 이해해야합니다. 올바르게 사용하고 이동하려는 요소에 영향을 주려면 position 속성도 추가해야합니다.

예를 들어, 개체를 평소와 같은 위치에서 10 픽셀 아래로 이동한다고 가정 해 보겠습니다. 그런 다음 추가 : 상단 : 10px; 코드에. 이렇게하면 오브젝트가 원래 위치에서 10 픽셀 아래로 이동합니다.

그래서, 당신의 코드는 다음과 같을 것이다 : 그것은 사용 조금 더 나은 당신이뿐만 아니라 정의를 이해하는 데 도움이해야

<html> 
<head><title></title> 
<style type="text/css"> 
.mydiv 
{ 
position:relative; 
top: 10px; 
background-color:red; 
min-width:150px; 
min-height:150px; 
} 
</style> 
</head> 
<body> 
<div class="mydiv"></div> 
</body> 
</html>

합니다. 행운을 빕니다!

출처

2017-01-29 05:58:35 MonkeyWithMachine

상대 : 현재 위치에 상대적이지만 이동할 수 있습니다. 또는 RELATIVE 위치 요소는 ITSELF를 기준으로 배치됩니다.

절대 : ABSOLUTE 위치 요소는 IT의 CLOSEST POSITIONED PARENT를 기준으로 배치됩니다. 하나가 존재하면 윈도우와 관련하여 ..... 고정 된 것처럼 작동합니다. 중간 DIV의 의지가 두번째 부모 DIV에 대한 위치의 변경 있도록

Check demo

HTML

<div class="parent"> 
    <div class="mydiv"></div> 
</div>

CSS 여기

.parent{ 
width:150px; 
height:150px; 
} 
.mydiv 
{ 
position:relative; 
background-color:red; 
min-width:150px; 
min-height:150px; 
}

는 2 부모 div의 위치는 상대적입니다. 첫 번째 부모 div 위치가 상대적이면 중간 div는 첫 번째 부모 div와 관련하여 위치를 변경합니다.

출처

2017-01-29 06:00:12 acmsohail

절대적 위치하는 요소의 초기 폭은 기본적 폭은 공간의 100 %가 (see note)

채울 수있다 상대적 위치 요소 달리 내의 콘텐츠의 폭 따라서 높이 (및 최소 높이)의 경우에는 차이가 없지만 폭의 경우에는 상대 요소가 100 % 너비처럼 작동합니다.

<html> 
 
<head><title></title> 
 
<style type="text/css"> 
 
.mydiv 
 
{ 
 
    position:relative; 
 
    background-color:red; 
 
    width:150px; /* default width is 100% for relative elements */ 
 
    min-height:150px; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 
<div class="mydiv"></div> 
 
</body> 
 
</html>

출처

2017-01-29 06:05:19

귀하의 의견은 무엇입니까? 그것은 명확한가 또는 어떤 질문? –

너비 : 150px; 하지만 난 너비 : 150px; –

절대 위치 대 상대 CSS 위치

답변

관련 문제