CSS Grid, FlexBox — как предотвратить перекрытие контейнеров? ⇐ Jquery

[Гость]

У меня есть веб-страница, на которой рисуются карточки и отображается текст. Текст и изображения перекрываются.
Не могу понять, как сделать так, чтобы они не перекрывались с помощью FlexBox и сетки CSS.


var obj;
$(document).ready(function() {
var url = "https://clearlightdoor.com/s3cards";
$("#save_file").css("visibility", "hidden");

// Use $.ajax instead of $.getJSON to handle asynchronous loading
$.ajax({
url: url,
dataType: 'json',
success: function(data) {
obj = data['AllData'];

for (var i = 0; i < obj.length; i++) {
if (i == 0) {
var td_data = obj["img"];
$("#tenth-card").append(td_data);
} else if (i == 1) {
var td_data = obj["img"];
$("#nineth-card").append(td_data);
} else if (i == 2) {
var td_data = obj["img"];
$("#eighth-card").append(td_data);
} else if (i == 3) {
var td_data = obj["img"];
$("#seventh-card").append(td_data);
} else if (i == 4) {
var td_data = obj["img"];
$("#sixth-card").append(td_data);
} else if (i == 5) {
var td_data = obj["img"];
$("#fifth-card").append(td_data);
} else if (i == 6) {
var td_data = obj["img"];
$("#fourth-card").append(td_data);
} else if (i == 7) {
var td_data = obj["img"];
$("#third-card").append(td_data);
} else if (i == 9) {
var td_data = obj["img"];
$("#first-card").prepend(td_data);
}
}
}
});

var inc = 10;

$("#next_btn").click(function() {
inc = inc - 1;

if (inc == 9) {
$("#first-card").css("visibility", "visible");
$("#start_text").remove();
var first_text = obj[9]["line"];
$("#card_text").append(first_text);
} else if (inc == 8) {
// $("#second-card").css("visibility", "visible");
var second_data = obj[8]["img"];
$("#first-card").append(second_data);
$("#card_text").text("");
$("#card_text").append(obj[inc]["line"]);
} else if (inc == 7) {
$("#third-card").css("visibility", "visible");
$("#card_text").text("");
$("#card_text").append(obj[inc]["line"]);
} else if (inc == 6) {
$("#fourth-card").css("visibility", "visible");
$("#card_text").text("");
$("#card_text").append(obj[inc]["line"]);
} else if (inc == 5) {
$("#fifth-card").css("visibility", "visible");
$("#card_text").text("");
$("#card_text").append(obj[inc]["line"]);
} else if (inc == 4) {
$("#sixth-card").css("visibility", "visible");
} else if (inc == 3) {
$("#seventh-card").css("visibility", "visible");
} else if (inc == 2) {
$("#eighth-card").css("visibility", "visible");
} else if (inc == 1) {
$("#nineth-card").css("visibility", "visible");
} else if (inc == 0) {
$("#tenth-card").css("visibility", "visible");
$("#save_file").css("visibility", "visible");
}
});
});

$("#save_file").click(function() {
var html_save = "";
for (var i = 0; i < obj.length; i++) {
html_save += "" + obj["line"] + "" + obj[i]["img"] + "";
}
html_save += "";

var hiddenElement = document.createElement('a');
hiddenElement.href = 'data:attachment/text,' + encodeURI(html_save);
hiddenElement.target = '_blank';
hiddenElement.download = 'tarot_reading.html';
hiddenElement.click();
});
/* this page uses CSS grid and FlexBox to control layout */
body {
font-family: 'Old Standard TT', serif;
background-color: #1c1c1c;
color: #d4af37;
font-size: 1.2em;
background-image: url("https://tarotcardsstyles.s3.us-west-2.a ... ern53b.jpg");
background-repeat: repeat;
}
#card, #absolute {
transition: all 0.3s ease;
border: 2px solid #d4af37;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
a {
color: #d4af37;
text-decoration: none;
}
a:hover, a:active {
color: #fff;
}
a:visited {
color: #d4af37;
}
.button {
color: #d4af37;
font-family: 'Old Standard TT', serif;
text-decoration: none;
border: 2px solid #d4af37;
padding: 5px 10px;
background-color: rgba(0, 0, 0, 0.7);
border-radius: 5px;
} /* the rotate id is on the image which comes from the json. generate_ai_tarot_reading.py makes the json. */
#rotate {
transition: all 0.3s ease;
border: 2px solid #d4af37;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
transform: rotate(270deg);
-webkit-transform: rotate(270deg);
-ms-transform: rotate(270deg);
margin-left: auto;
margin-right: auto;
z-index: 1;
position: relative;
left: -120px;
}
button {
text-decoration: none;
color: #d4af37;
background: rgba(0, 0, 0, 0.7);
padding: 7px 14px;
border: 2px solid #d4af37;
border-radius: 5px;
font-family: 'Old Standard TT', serif;
font-size: 1em;
margin-bottom: 20px;
}
.content-container {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 0;
}
.start-text {
text-align: center;
margin-bottom: 20px;
}
.grid-container {
display: flex;
justify-content: center;
margin-top: 200px;
}
.grid-item {
padding: 10px;
}
.card-container {
display: flex;
justify-content: center;
margin-top: 20px;
}

.card-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 20px;
position: relative;
}

.text-container {
margin-top: 20px;
text-align: center;
}
.reading-grid {
display: flex;
flex-direction: column;
gap: 10px;
}
.button-container {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 20px;
}
#card_text {
top: 400%;
left: 100%;
display: flex;
}
#first-card {
position: relative;
}
#second-card, #third-card, #fourth-card, #fifth-card, #sixth-card,
#seventh-card, #eighth-card, #nineth-card, #tenth-card {
position: absolute;
visibility: collapse;
width: 100%;
height: 100%;
}
#second-card {
top: 50%;
left: 50%;
}
#third-card {
top: 100%;
left: 0;
display: flex;
}
#fourth-card {
top: 0;
left: -100%;
}
#fifth-card {
top: -100%;
left: 0;
}
#sixth-card {
top: 0;
left: 100%;
}
#seventh-card {
top: 200%;
left: 300%;
}
#eighth-card {
top: 100%;
left: 300%;
}
#nineth-card {
top: 0;
left: 300%;
}
#tenth-card {
top: -100%;
left: 300%;
}


Next

Save reading to file

Think about a question you have or a situation you would like to know more about or just let yourself go still inside for a moment and click Next to begin and draw cards.















— это текстовый элемент div, перекрывающийся с изображениями.





The Clear Light Door


/* this page uses CSS grid and FlexBox to control layout */
body {
font-family: 'Old Standard TT', serif;
background-color: #1c1c1c;
color: #d4af37;
font-size: 1.2em;
background-image: url("https://tarotcardsstyles.s3.us-west-2.a ... ern53b.jpg");
background-repeat: repeat;
}
#card, #absolute {
transition: all 0.3s ease;
border: 2px solid #d4af37;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
a {
color: #d4af37;
text-decoration: none;
}
a:hover, a:active {
color: #fff;
}
a:visited {
color: #d4af37;
}
.button {
color: #d4af37;
font-family: 'Old Standard TT', serif;
text-decoration: none;
border: 2px solid #d4af37;
padding: 5px 10px;
background-color: rgba(0, 0, 0, 0.7);
border-radius: 5px;
} /* the rotate id is on the image which comes from the json. generate_ai_tarot_reading.py makes the json. */
#rotate {
transition: all 0.3s ease;
border: 2px solid #d4af37;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
transform: rotate(270deg);
-webkit-transform: rotate(270deg);
-ms-transform: rotate(270deg);
margin-left: auto;
margin-right: auto;
z-index: 1;
position: relative;
left: -120px;
}
button {
text-decoration: none;
color: #d4af37;
background: rgba(0, 0, 0, 0.7);
padding: 7px 14px;
border: 2px solid #d4af37;
border-radius: 5px;
font-family: 'Old Standard TT', serif;
font-size: 1em;
margin-bottom: 20px;
}
.content-container {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 0;
}
.start-text {
text-align: center;
margin-bottom: 20px;
}
.grid-container {
display: flex;
justify-content: center;
margin-top: 200px;
}
.grid-item {
padding: 10px;
}
.card-container {
display: flex;
justify-content: center;
margin-top: 20px;
}

.card-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 20px;
position: relative;
}

.text-container {
margin-top: 20px;
text-align: center;
}
.reading-grid {
display: flex;
flex-direction: column;
gap: 10px;
}
.button-container {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 20px;
}
#card_text {
top: 400%;
left: 100%;
display: flex;
}
#first-card {
position: relative;
}
#second-card, #third-card, #fourth-card, #fifth-card, #sixth-card,
#seventh-card, #eighth-card, #nineth-card, #tenth-card {
position: absolute;
visibility: collapse;
width: 100%;
height: 100%;
}
#second-card {
top: 50%;
left: 50%;
}
#third-card {
top: 100%;
left: 0;
display: flex;
}
#fourth-card {
top: 0;
left: -100%;
}
#fifth-card {
top: -100%;
left: 0;
}
#sixth-card {
top: 0;
left: 100%;
}
#seventh-card {
top: 200%;
left: 300%;
}
#eighth-card {
top: 100%;
left: 300%;
}
#nineth-card {
top: 0;
left: 300%;
}
#tenth-card {
top: -100%;
left: 300%;
}




Next

Save reading to file

Think about a question you have or a situation you would like to know more about or just let yourself go still inside for a moment and click Next to begin and draw cards.














/*global $*/
var obj;
$(document).ready(function() {
var url = "https://clearlightdoor.com/s3cards";
$("#save_file").css("visibility", "hidden");

// Use $.ajax instead of $.getJSON to handle asynchronous loading
$.ajax({
url: url,
dataType: 'json',
success: function(data) {
obj = data['AllData'];

for (var i = 0; i < obj.length; i++) {
if (i == 0) {
var td_data = obj[i]["img"];
$("#tenth-card").append(td_data);
} else if (i == 1) {
var td_data = obj[i]["img"];
$("#nineth-card").append(td_data);
} else if (i == 2) {
var td_data = obj[i]["img"];
$("#eighth-card").append(td_data);
} else if (i == 3) {
var td_data = obj[i]["img"];
$("#seventh-card").append(td_data);
} else if (i == 4) {
var td_data = obj[i]["img"];
$("#sixth-card").append(td_data);
} else if (i == 5) {
var td_data = obj[i]["img"];
$("#fifth-card").append(td_data);
} else if (i == 6) {
var td_data = obj[i]["img"];
$("#fourth-card").append(td_data);
} else if (i == 7) {
var td_data = obj[i]["img"];
$("#third-card").append(td_data);
} else if (i == 9) {
var td_data = obj[i]["img"];
$("#first-card").prepend(td_data);
}
}
}
});

var inc = 10;

$("#next_btn").click(function() {
inc = inc - 1;

if (inc == 9) {
$("#first-card").css("visibility", "visible");
$("#start_text").remove();
var first_text = obj[9]["line"];
$("#card_text").append(first_text);
} else if (inc == 8) {
// $("#second-card").css("visibility", "visible");
var second_data = obj[8]["img"];
$("#first-card").append(second_data);
$("#card_text").text("");
$("#card_text").append(obj[inc]["line"]);
} else if (inc == 7) {
$("#third-card").css("visibility", "visible");
$("#card_text").text("");
$("#card_text").append(obj[inc]["line"]);
} else if (inc == 6) {
$("#fourth-card").css("visibility", "visible");
$("#card_text").text("");
$("#card_text").append(obj[inc]["line"]);
} else if (inc == 5) {
$("#fifth-card").css("visibility", "visible");
$("#card_text").text("");
$("#card_text").append(obj[inc]["line"]);
} else if (inc == 4) {
$("#sixth-card").css("visibility", "visible");
} else if (inc == 3) {
$("#seventh-card").css("visibility", "visible");
} else if (inc == 2) {
$("#eighth-card").css("visibility", "visible");
} else if (inc == 1) {
$("#nineth-card").css("visibility", "visible");
} else if (inc == 0) {
$("#tenth-card").css("visibility", "visible");
$("#save_file").css("visibility", "visible");
}
});
});

$("#save_file").click(function() {
var html_save = "";
for (var i = 0; i < obj.length; i++) {
html_save += "" + obj[i]["line"] + "" + obj[i]["img"] + "";
}
html_save += "";

var hiddenElement = document.createElement('a');
hiddenElement.href = 'data:attachment/text,' + encodeURI(html_save);
hiddenElement.target = '_blank';
hiddenElement.download = 'tarot_reading.html';
hiddenElement.click();
});




Подробнее здесь: https://stackoverflow.com/questions/781 ... verlapping