html - 将多个样式重叠的元素放置
问题描述
我需要帮助放置我的物品。我刚刚开始,所以我需要解释。对你来说似乎很明显的事情,对我来说不一定如此:) 我有一个我想要改进的标题。我想把右边的两个图像叠加起来,即“保留”按钮在图像上方。另一方面,我想将中间图像居中。我知道样式是重叠的,并且我通过 chrome 控制台尝试的更改不起作用。我不能强加我想要的风格,也不一定能找到阻碍我的风格。如果你有可能给我一些建议,那就太好了。谢谢你。
链接是:https ://hotel-restaurant-la-borie.fr/
标题
<div class="site-branding">
<div class="logo-main" style="text-align:left;" >
<h1 class="site-title semantic">Hotel LOGIS LA BORIE en Périgord Noir</h1>
<a href="https://hotel-restaurant-la-borie.fr/" rel="home" class="site-logo"><img id="desktop-logo" src="https://hotel-restaurant-la-borie.fr/wp-content/uploads/2017/04/Transparent.png" alt="Hotel LOGIS LA BORIE en Périgord noir" width="988" height="614">
<img id="retina-logo" src="https://hotel-restaurant-la-borie.fr/wp-content/uploads/2017/04/Transparent.png" alt="Hotel LOGIS LA BORIE en Périgord noir" width="988" height="614">
</a>
<div class="tel-header" >Tel. +33 (0 53 28 97 60</div>
</div>
<div class="form-reservation">
<div class="logo-logis" >
<a href="https://hotel-restaurant-la-borie.fr/wp-content/uploads/2020/12/sejoursur-logis.mp4" target="_blank" rel="noopener noreferrer">
<img src="https://hotel-restaurant-la-borie.fr/wp-content/uploads/2020/12/BANDEAU-MAIL-400X100px-SEJOUR-PLUS-SUR-1.jpg" alt="lien de réservation" style="width: 400px !important;">
</a>
</div>
<div class="group-input" >
<div class="logo-logis" >
<a href="https://www.logishotels.com/fr/hotel/-254254?partid=568&layout=search&ref=r" target="_blank" rel="noopener noreferrer">
<img style="width: 105px !important;" src="https://hotel-restaurant-la-borie.fr/wp-content/uploads/2017/04/reservez-1.png" alt="lien de réservation" width="112" height="25"></a>
<a href="https://www.logishotels.com/fr/hotel/hotel-la-borie-254254?PARTID=1012&gclid=Cj0KCQjwvLLZBRDrARIsADU6ojBX_SZoGK4q8u1U_o9D7ym88hIxs1SkPMDf8VeswMveqWXBDF70HFsaApIXEALw_wcB" target="_blank">
<img style="width: 105px !important;" src="https://hotel-restaurant-la-borie.fr/wp-content/themes/morrison-hotel/images/log-logis.png"></a>
</div>
</div>
</div>
</div>
如果我将transform: translateX(calc(100% + 10px))添加到“reservez”按钮,它会给我:
我想使用包含图像和链接的 div,正如您在我的代码中看到的那样,并放置 display : block 但将它放在另一个之上是行不通的......图像包含在链接中,所以如果我改变只有img的风格留在他的地方。
解决方案
您可以使用 css 翻译图像
img{
transform: translateX(calc(100% + 10px))
}
例如,代码将图像向右移动 100% + 10px
或尝试将两个图像放在同一个标签中,然后添加到顶部的 Reservez 按钮:
bottom:0
z-index:1
这将把它放在底部和前面
推荐阅读
- javascript - 使用带有动态项目数组的 react-spring useSprings
- python - 具有两个分类变量的 Matplotlib 点图
- javascript - 当我运行 index.html 时 android 没有检测到我的 .css 和 .js 文件怎么办?
- node.js - 是否可以将功能从服务器发送到客户端?
- c# - How to create dynamic type DbSet in Entity Framework .Net Core application?
- yii2 - How to give active class to clicked button in Yii2
- javascript - How do I do something LIKE in mysql in javascript?
- sql-server - SQL Server INSERT INTO using transaction
- java - Why do i have to return from a function that switches on an enum and covers every possible entry?
- ms-access - Nested If Else Update Query in MS Access