![放置多个样式的元素重叠]( "放置多个样式的元素重叠")
本文介绍了放置多个样式的元素重叠的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我需要帮助放置我的物品.我刚刚开始，所以我需要解释.对你来说似乎很明显的东西，对我来说不一定如此:) 我有一个想要改进的标题.我想把右边的两个图像叠加起来，即保留"图像.按钮位于图像上方.另一方面，我想将中间图像居中.我知道样式是重叠的，我通过 chrome 控制台尝试的更改不起作用.我不能强加我想要的风格，我也不一定能找到阻碍我的风格.如果你能给我一些建议，那就太好了.谢谢.
链接是:
<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=家"class="site-logo"><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"宽度=988"高度=614"></a><div class="tel-header";>电话.+33 (0 53 28 97 60/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";目标=_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=留置权"style="width: 400px !important;"></a>
<div class="group-input";><div class="logo-logis";><a href=https://www.logishotels.com/fr/hotel/-254254?partid=568&layout=search&ref=r"目标=_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=留置权"宽度=112"高度＝25"</a><a href="https://www.logishotels.com/fr/hotel/hotel-la-borie-254254?PARTID=1012&gclid=Cj0KCQjwvLLZBRDrARISADU6ojBX_SZoGK4q8u1U_o9D78u1U_o9D7xFwEkAwAkD7fwX8hBhFwEkAwAkEwAkEwAhBhEwAkvEwAhBhEwAhBhFwM目标=_blank"><img style="width: 105px !important;";src=https://hotel-restaurant-la-borie.fr/wp-content/themes/morrison-hotel/images/log-logis.png"></a>
如果我添加transform: translateX(calc(100% + 10px)) 到reservez"它给我的按钮:
我想使用包含图像和链接的 div，正如您在我的代码中看到的那样，并放置 display : 块，但将其放在另一个之上是行不通的...图像包含在链接中，因此如果我只更改 img 的样式，则留在他的位置.
解决方案
你可以使用css翻译图片
img{变换:translateX(calc(100% + 10px))}
例如代码将图像向右移动 100% + 10px
或者尝试将两张图片放在同一个标签中，然后添加到顶部的reservez按钮:
底部:0z-索引:1
这会将它放在底部和前面
I need help placing my items. I'm just starting out so I need explanations. What will seem obvious to you, will not necessarily be so for me :) I have a header that I want to improve.I would like the two images on the right to be superimposed, ie the "reserve" button is above the image.On the other hand, I would like to get to center the middle image.I know the styles are overlapping and the changes I tried through the chrome console are not working. I can't impose the style I want and I can't necessarily find the style that blocks me.If it's possible for you to give me some advice that would be great. Thank you.
The link is : https://hotel-restaurant-la-borie.fr/
HEADER
<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>
If I addtransform: translateX(calc(100% + 10px)) to the "reservez" button it gives me :
I wanted to use the div containing both images and links as you can see on my code and put display : block but it doesn"t work to have it one above the other... The images are included in a link so if I change only the style of the img the stays at his place.
解决方案
you could translate the image by using css
img{
transform: translateX(calc(100% + 10px))
}
the code move the image to right by 100% + 10px for example
or try to put the two images in the same tag then add to the top reservez button:
bottom:0
z-index:1
this will put it on the bottom and front
这篇关于放置多个样式的元素重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！