字节跳动校招面试题-----边框叠加，并且选中的内容显示在最上层

本文链接：https://blog.youkuaiyun.com/lm_four/article/details/88383973

<!<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>边框叠加</title>
       	<style>
       		* {
       			margin: 0;
       			padding: 0;
       		}
       		body {
       			width: 100%;
       			height: 100%;
       			margin: 0 auto;
       		}
       		.box {
       			width: 165px;
       			margin: 100px auto;
       		}
       		.s_box {
       			width: 50px;
       			height: 50px;
       			border: 5px solid blue;
       			margin-right: -5px;   /*要使边框叠加给margin加负值*/
       			margin-bottom: -5px;
       			/*核心在于设置z-index层级  该属性为position时可用*/
       			position:relative;  
       			float: left;    /*浮动可以和相对定位同时使用*/
        		text-align: center;
       			line-height: 50px;
       		}
       		.s_box:hover {
       			border-color: red;
       			z-index: 5;
       		}
       		a {
       			text-decoration: none;
       			color:green;
       		}
       	</style>
    </head>
    <body>
    	<div class="box">
        	<div class="row">
        		<div class="s_box"><a href="">1</a></div>
        		<div class="s_box"><a href="">2</a></div>
        		<div class="s_box"><a href="">3</a></div>
        	</div>
        	<div class="row">
        		<div class="s_box"><a href="">4</a></div>
        		<div class="s_box"><a href="">5</a></div>
        		<div class="s_box"><a href="">6</a></div>
        	</div>
        	<div class="row">
        		<div class="s_box"><a href="">7</a></div>
        		<div class="s_box"><a href="">8</a></div>
        		<div class="s_box"><a href="">9</a></div>
        	</div>
        </div>
    </body>
</html>

效果如图在这里插入图片描述