Discussion :

[flamant]

Bonjour,

je voudrais positionner de manière absolue un span avec une position left à 2.34% et une div avec une position right à 1%, le container ayant une position absolue avec un width de 100%

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<div class="header" >
	<span  style="position: relative; left:2.34%;z-index: 1;">MALISIMMO</span>
	<div  style="position: relative; width: 294px; right: 1%;">
		<button   style="height: 36px;z-index: 1;">Buy</button>
		<button   style="height: 36px;z-index: 1;">About Us</button>
		<button class="position1" style="z-index: 1;">SIGN IN</button>
	</div>
</div>

le jsfiddle est le suivant https://jsfiddle.net/flamant/mopu087v/23/

avez vous une solution et si oui est il possible de résoudre le problème en mettant une position absolute pour le span et div enfant positionné. Merci

[flamant]

Bonjour,
j'ai trouvé la solution. Elle se trouve dans le fiddle https://jsfiddle.net/flamant/mopu087v/23/

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
<div class="header" >
	<span  style="position: absolute; left:2.34%;z-index: 1;">MALISIMMO</span>
	<div  style="position: absolute; width: 294px; right: 1%;">
		<button   style="height: 36px;z-index: 1;">Buy</button>
		<button   style="height: 36px;z-index: 1;">About Us</button>
		<button class="position1" style="z-index: 1;">SIGN IN</button>
	</div>
</div>

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.header {
  position: absolute;
  top: 0px;
  height: 65px;
  width: 100%;
  display: flex;
  align-items: center;
  border: 1px solid black;
  background-color: lime;
}
 
 
 
.position1 {
  position: absolute;
  width: 84px;
  height: 36px;
  cursor: pointer;
  background: #ECB605 0% 0% no-repeat padding-box;
  border-radius: 2px;
  opacity: 1;
  float: right;
}