After the negative margin value is applied, the part is not stacked

CSDN Q & A 2021-12-30 05:42:43 阅读数:668

negative margin value applied stacked
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } ul li { position: relative; float: left; list-style: none; border: 1px solid blue; width: 200px; height: 300px; margin-left: -1px; } ul li:hover { /* position: relative; If the box is not positioned , After adding relative positioning, the mouse can */ z-index: 1; border: 1px solid red; } </style></head><body> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul></body></html>

The border between the second and third boxes does not overlap

img




Refer to the answer 1:

forehead , I have no problem copying it , What browser




Refer to the answer 2:



Refer to the answer 3:

Browser rendering problems , Just refresh a few more times




Refer to the answer 4:
版权声明:本文为[CSDN Q & A]所创,转载请带上原文链接,感谢。 https://primo.wiki/2021/12/202112300542412767.html