子绝父相原理
今天在写前端组件搜索框时遇到一个问题,如何在我写的input中插入其他的button,例如搜索键和清除键。然后在自己去查询资料之后,看到了一个子绝父相的方法。
<div id="box">
<input
type="email"
id="search"
placeholder="请输入"
required
v-model="value"
/>
<button id="sear" @click="newcreate()"></button>
<button id="cleared" class="cleared" @click="test" v-if='value!==""'></button>
</div> //html代码
#box {
position: relative;
width: 300px;
margin: 250px auto;
margin-top: 500px;
align-items: centerl;
}
#search {
background-image: url("https://iphoto.macsc.com/icon/icon/256/20191128/68174/2929190.png");
background-size: 30px 30px;
background-repeat: no-repeat;
background-position: 0px;
display: inline-block;
width: 100%;
height: 30px;
border-radius: 25px;
font-family: "Microsoft soft";
padding-left: 30px;
}
.clear {
position: absolute;
right: 30px;
height: 30px;
background-image: url("https://iphoto.macsc.com/icon/icon/256/20200608/80180/3300573.png");
background-size: 30px 30px;
}
button {
position: absolute;
right: 0px;
height: 30px;
width: 30px;
background-image: url("https://iphoto.macsc.com/icon/icon/256/20210104/105697/4510097.png");
background-size: 30px 30px;
background-repeat: no-repeat;
border-radius: 25px;
}
button:hover {
background-color: #7eacf7;
} //css样式
将盒子的位置设置为 relative(相对定位),其中的子级设置absolute(绝对定位)。子级不会占用位置,他主要是存放在父盒子中,占用位置的是父盒子,所以父盒子要采用相对定位。子级主要是在父盒子中移动,因为绝对位置是依靠参照物进行的定位,所以绝对定位是 相对于距离它最近的已经定位的祖先元素 进行定位。
上一篇: 在进行定位时,为何要遵循子元素独立于父元素的特性原则?
下一篇: 定位,子绝父相