이번에는 html에서의 position 사용법과 html에서의 주의사항에 대해 소개하겠습니다. 실제 사례를 살펴보겠습니다.
어제 HTML에 대한 내용을 좀 배웠는데, JD.com에 검색창을 만들고 싶어서 드디어 만들었는데, 장바구니에서 결제를 했더니 숫자가 표시되어 있더군요. 추가로, 장바구니와 함께 숫자를 이동하려면 함께 배치해야 합니다. 먼저 숫자의 div 위치를 절대값으로 설정하세요. 레이어드 느낌이 나는데, 숫자 위치의 상위 태그가 본문이기 때문에 위쪽과 왼쪽 설정 시 장바구니의 원하는 위치에 설정할 수도 있습니다. 단, 여백을 변경하면 됩니다. 장바구니는 함께 이동할 수 없으므로 장바구니의 여백을 변경하면 됩니다. 위치는 상대 태그로 설정되므로 여백이 아무리 많아도 해당 숫자의 상위 태그가 장바구니가 됩니다. 장바구니가 조정되면 숫자도 함께 이동합니다...
<html>
<head>
<title>day03.html</title>
<style type="text/css">
/*首先写一个position的div*/
#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>
<div id="car">
去购物车付款
<div id="num">0</div>
</div>
</body>
</html>이 사례를 읽어보셨을 것입니다. 방법을 익힌 후 PHP 중국어 웹사이트의 다른 관련 기사에 주목하여 더 흥미로운 내용을 확인하세요!
관련 읽기:
배경색 깜박임을 달성하기 위해 버튼 트리거를 사용하는 방법
HTML에서 여러 클래스 속성을 정의하는 것은 유효하지 않습니다
위 내용은 HTML의 위치 사용법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
