>  기사  >  웹 프론트엔드  >  HTML에서의 위치 사용법 소개

HTML에서의 위치 사용법 소개

高洛峰
高洛峰원래의
2017-03-07 11:29:423083검색

일반적인 태그가 완료할 수 없는 작업을 완료하는 데 사용할 수 있는 HTML의 위치 속성은 누구나 잘 알고 있을 것입니다. 어제 HTML 콘텐츠를 좀 배웠는데, JD.com에 검색창을 만들고 싶어서 드디어 만들었는데, 장바구니 결제를 했더니 거기에 숫자가 표시되어 있었는데 안 만들었어요. 어떻게 추가해야 할지 모르겠습니다. 장바구니와 함께 숫자를 이동하려면 함께 배치해야 합니다. 위치 지정에는 반드시 위치가 필요합니다. 먼저 숫자의 위치를 ​​절대값으로 설정합니다. 왜냐하면 이때 디지털 위치의 상위 태그가 body이기 때문에 상단과 좌측 설정 시 장바구니의 원하는 위치로 설정할 수도 있습니다. 그러나 장바구니의 여백을 변경하면 둘은 불가능합니다. 함께 이동하므로 장바구니의 위치를 ​​설정합니다. 장바구니의 여백을 어떻게 조정하더라도 숫자 위치의 상위 태그가 장바구니가 되도록 합니다. ...

코드는 다음과 같습니다.

<html> 
<head> 
<title>day03.html</title> 
<style type="text/css"> 
/*首先写一个position的p*/ 
#car{ 
width:150px;height:30px; 
background: #999999; 
color:white;text-align: center; 
line-height: 30px;margin: 232px 300px; 
border:1px solid black;position: relative; 
} 
#num{ 
width:20px;height:20px;background: red; 
color:white;text-aligh:center; 
line-height:20px;position: absolute; 
top:-15px;left:25px; 
} 
</style> 
</head> 
<body> 
<p id="car"> 
去购物车付款 
<p id="num">0</p> 
</p> 
</body> 
</html>

html에서 위치 사용법에 대한 더 많은 관련 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!

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