CSS定位求助

Ldfd · 发表于 2021-1-21 15:49

本帖最后由 Ldfd 于 2021-1-21 16:47 编辑

网页中央是一张图片
如何实现在图片左下角放置按钮

类似这样，前端纯小白

poong · 发表于 2021-1-21 15:53

你是要图片下面放按钮？

Ldfd · 发表于 2021-1-21 15:54

poong 发表于 2021-1-21 15:53
你是要图片下面放按钮？

是的（字数补丁

知心 · 发表于 2021-1-21 15:56

不是很明白你要的效果，可以把图片和按钮用一个容器包起来，然后正常布局就可以吧。或者你说的这个效果有没有别人使用到了，可以放一下示例网址

kindiaing · 发表于 2021-1-21 16:00

本帖最后由 kindiaing 于 2021-1-22 14:29 编辑

在图片和按钮中间加一行代码就可以了，清除浮动的。
<div style="clear:both;"></div>

在图片和按钮中间加一行代码就可以了，清除浮动的。

<div style="clear:both;"></div>

你这个问的也太基础了，找个课程学习下HTML和CSS吧，一周就可以上手了。以下是完整代码，你可以删除11行代码，然后对比下。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2665572900,3180636832&fm=26&gp=0.jpg" alt="">
        <div style="clear:both;"></div>
        <input type="button" value="按钮">
        <input type="button" value="按钮">
        <input type="button" value="按钮">
        <input type="button" value="按钮">
    </div>
</body>
</html>

等你学会了定位和边距，position，margin，padding就可以随意布局了。

Ldfd · 发表于 2021-1-21 16:01

知心发表于 2021-1-21 15:56
不是很明白你要的效果，可以把图片和按钮用一个容器包起来，然后正常布局就可以吧。或者你说的这个效果有没 ...

没看到这么布局的，按钮在左上角，图片在中央，已经在同一个div中，不知道如何相对图片定位

kenkuuga · 发表于 2021-1-21 16:04

本帖最后由 kenkuuga 于 2021-1-21 16:21 编辑

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css</title>
</head>
<body style="margin: 0;padding: 0;width: auto;">
<div style="position:relative;text-align: center;">
    <img style="position: relative;" src="https://i.loli.net/2020/04/14/VgO2Kk1nufAlea4.gif">
    <div style="margin:0 auto;bottom:0px;left:-50%;" ><button style="width: 80px;height: 50px;" value="按钮1"></button><button style="width: 80px;height: 50px;margin-left: 20px;"  value="按钮2"></button><button style="width: 80px;height: 50px;margin-left: 20px"  value="按钮3"></button><button style="width: 80px;height: 50px;margin-left: 20px"  value="按钮4"></button></div>
</div>
<div style="position:relative">
<img style="position: relative;" src="https://i.loli.net/2020/04/14/VgO2Kk1nufAlea4.gif">
<div style="position:absolute;bottom:0px;left:0px;" ><button style="width: 100px;height: 50px;margin-left: 20px" value="按钮1"></button><button style="width: 100px;height: 50px;margin-left: 20px;"  value="按钮2"></button><button style="width: 100px;height: 50px;margin-left: 20px"  value="按钮3"></button></div>
</div>
</body>

Ldfd · 发表于 2021-1-21 16:08

kindiaing 发表于 2021-1-21 16:00
在图片和按钮中间加一行代码就可以了，清除浮动的。

然后还能让图片居中吗？（有时间确实该学学

无常方便面 · 发表于 2021-1-21 16:12

父级元素相对定位，子级绝对定位

心病 · 发表于 2021-1-21 16:14

A要在B上定位，A就用absolute,B就用relative,如果是图片下面放4个按钮的话，完全不需要定位吧。。。

帐号		自动登录	找回密码
密码			注册[Register]

[已解决] CSS定位求助

免费评分

个人中心