» »

Pozicija elementov

Pozicija elementov

trubadur99 ::

zdravo. Že drugič objavljam v tej temi, sedaj z problemom. Imam element katerega position=relative, znotraj tega elementa pa je element z pozicijo absolute. Namen teh elementov je, da ko z miško "hoveraš" čez element se pojavi "dropwdown". Na koncu elementa bi rad postavil še footer, vendar ko vstavim footer se postavi čez prvi element, ne glede na kakšno vrednost je nastavljena pozicija footerja. Morda kdo ve, kaj delam narobe?
<section class="one-third" id="prvi" >
     <h3>Name</h3>
     <td><i id="download-icon" class="fa fa-download"></i></td>
     <p>Description</p>
     <div class="overlay">
     <a href="#" class="text">DOWNLOAD</a>
     </div>
</section>


in css:
.overlay {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background-color: rgb(42, 222, 98);
  overflow: hidden;
  width: 100%;
  height:0;
  transition: .5s ease;
}

.one-third:hover .overlay {
  bottom: 0;
  height: 100%;
}

.text {
  white-space: nowrap; 
  color: white;
  font-size: 20px;
  position: absolute;
  overflow: hidden;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  text-decoration: none;
  border: 2px solid white;
  padding: 16px 16px;

}
.text:hover {
	color: rgb(42, 222, 98);
	background-color: white;
	transition: .5s ease;

ph0enix ::

Če te prav razumem imaš problem z prikazovanjem footerja medtem ko je download gumb prikazan. Dodaj to kodo v tvoj CSS:

.text:hover footer {
    display:none;
}

Netrunner ::

Vsem elementom ki imajo dololčen kakšen position lahko doložiš z-index s katerim določiš kateri element naj bo nad katerim.

trubadur99 ::

Hvala obema za odgovor:)
Sem pa zadevo repil tako da sem float elementa footer nastavil na left, pa se je rešilo :)


Vredno ogleda ...

TemaSporočilaOglediZadnje sporočilo
TemaSporočilaOglediZadnje sporočilo
!

Vse, kar ste si želeli vprašati o CSS, pa si niste upali. (strani: 1 2 3 423 24 25 26 )

Oddelek: Izdelava spletišč
1297328618 (52767) htmltroubles
»

Kako narediti to stran "resposive"?

Oddelek: Izdelava spletišč
5895 (786) zzbil
»

Prikaz strani na različni resoluciji-Joomla

Oddelek: Izdelava spletišč
151787 (1515) kr?en
»

meni razporejen po celotni dolžini

Oddelek: Izdelava spletišč
71979 (1847) XzupanX
»

[CSS]Pozicioniranje footer diva

Oddelek: Izdelava spletišč
62240 (2187) amaze646

Več podobnih tem