将FAB登出/管理按钮定位到右上角



前言:我对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>

最新更新