前言:我对CSS很不熟悉
我想定位这个FAB按钮,目前在屏幕的右下角,到右上角。下面FAB的CSS是
"[tooltip]:before {left: 110% !important; right: auto !important}", ".container-fab {right: 0 !important; left: auto !important;}"
app上FAB按钮图片
如果你想让你的按钮的位置固定,那么只要给它position: fixed; right: 0; top: 0;
,它会给你在右上角的固定按钮。
要从最右边留出空间,只需在上面的css中设置right: 15px; top: 15px
。
你会在右上角看到那个按钮。
我假设(我在阅读你的问题后得到的)你的按钮绝对定位在父div内,位置相对。你想要按钮在右上角。我还在代码中添加了如果你使用"[tooltip]:before"作为按钮
.parent{
height:100px;
width:100px;
position:relative;
background-color:yellow;
}
.parent::before {
content: "+";
position: absolute;
width: 20px;
height: 20px;
border-radius: 20px;
top: 0px;
right: 0px;
margin: 5px;
background-color: blue;
color: aliceblue;
display: flex;
/* to center the + symbol */
justify-content: center;
align-items: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./main.css" />
<title>Document</title>
</head>
<body>
<div class="parent"></div>
</body>
</html>
.parent{
height:100px;
width:100px;
position:relative;
background-color:yellow;
}
.button {
position: absolute;
width: 20px;
height: 20px;
border-radius: 20px;
top: 0px;
right: 0px;
margin: 5px;
background-color: blue;
color: aliceblue;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./main.css" />
<title>Document</title>
</head>
<body>
<div class="parent">
<button class="button">+</button>
</div>
</body>
</html>