web-dev-qa-db-fra.com

Comment placer du texte sur une image défilante de parallaxe

J'essaie d'afficher un titre sur l'image sur mon site Web. Voici un violon:

https://jsfiddle.net/o3942ppa/1/

J'ai essayé de résoudre le problème en créant un en-tête avec en-tête id tel que:

<h2 id="header">Text</h2>

et le style absolument avec un z-index pour s'assurer qu'il affiche sur le dessus comme:

#header{
  position: absolute;
  z-index: 1000;
  top: 200px;
  left: 200px;
}

Je pensais que cela aurait pour effet de positionner le titre par-dessus tous les éléments, positionnés à partir du bord du document. Cependant, je n'ai pas obtenu le résultat souhaité. Comment pourrais-je m'y prendre? De plus, j'ai lu hier soir qu'il est généralement préférable d'utiliser des flotteurs que de se positionner. Je ne sais pas si cela s'applique dans ce cas, ou si c'est vrai du tout. Je vous serais reconnaissant si quelqu'un pouvait peser po.

htmlcsstwitter-bootstrap
4
natem1270

Vous devez ajuster la structure de votre contenu HTML pour que #header soit avant votre .parallax. En utilisant votre style désiré:

.parallax{
    background-image: url("https://images.pexels.com/photos/349608/pexels-photo-349608.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb");
    min-height: 500px; 
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin: 0;
}

#header{
  position: absolute;
  z-index: 1000;
  top: 200px;
  left: 200px;
}

.text-box{
	height: 600px;
	padding: 50px;
}
@media only screen and (max-device-width: 1024px) {
    .parallax {
        background-attachment: scroll;
    }
}

.navbar {
    margin-bottom: 0 !important;
}
<title>Bootstrap Default Template</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body>
<h1 id="header">Text</h1>
<div class="parallax"></div>
<div class="col-lg-12 text-box text-center">
<h1>Restauraunt Heading</h1>
</div>
</body>

7
Mike Diglio

Une autre solution consiste simplement à placer votre h1 dans un div de parallaxe ...

.parallax{
    background-image: url("https://images.pexels.com/photos/349608/pexels-photo-349608.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb");
    min-height: 500px; 
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin: 0;
    position:relative;

}
.text-box{
	height: 600px;
	padding: 50px;
}
@media only screen and (max-device-width: 1024px) {
    .parallax {
        background-attachment: scroll;
    }
}
#header{
 position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.navbar {
    margin-bottom: 0 !important;
}
<title>Bootstrap Default Template</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body>
<div class="parallax"><h1 id="header">Text</h1></div>
<div class="col-lg-12 text-box text-center">
<h1>Restauraunt Heading</h1>

</div>
</body>

2
Dejo Dekic

Votre classe .paralax doit également avoir un attribut de position ajouté en tant que relate ou absolute. Vous pouvez également définir z-index: 0

Ah, et z-index: 1 est suffisant pour l'entête :)

1
Ula

Vous devez changer position: absolute en position: fixed. Le positionnement absolu placera l'élément par rapport à son conteneur parent. Le positionnement fixe le positionne par rapport au corps du document. Le positionnement relatif (position: relative) le positionne par rapport à l'endroit où il tomberait naturellement dans le flux du DOM.

Fiddle ici

0
sn3ll