Space between div in postion: relative

Space between div in postion: relative - javascript

I'm builiding a navigation panel which is over header. I used postion: relative and I subtracked few px (#navigation).
The height of the section header is reserved as if the navigation panel has not been moved. I would like that section to be closer to the header with no break.
How can I do it?
body {
background-color: #e6e6e6;
}
#conteiner {
border: 1px solid black;
}
#conteiner>* {
min-height: 100px;
display: flex;
}
/* HEADER */
header {
flex-direction: column;
align-items: center;
}
#spacer-up {
background-color: #8dc63f;
height: 15px;
width: 100%;
}
#frame-header {
max-height: 400px;
flex-direction: column;
align-items: center;
}
#spacer-down {
background-color: #dddddd;
height: 15px;
width: 100%;
}
#navigation {
width: 450px;
height: 130px;
display: flex;
position: relative;
top: -65px;
}
.button1 {
flex: 1;
background-color: #00984a;
display: flex;
align-items: center;
justify-content: center;
color: #FFF;
transition: 0.1s;
}
.button1:hover {
background-color: #007639;
transition: 0.2s;
}
/* Content */
section {
display: flex;
justify-content: center;
position: relative;
}
#content {
border: 1px solid black;
width: 1200px;
background-color: #FFF;
}
footer {
background-color: #007639;
justify-content: center;
align-items: center;
}
<body>
<!-- Add your site or application content here -->
<div id="conteiner">
<header>
<div id="spacer-up"></div>
<div id="frame-header">
<img src="/img/header-background.png" alt="" width="1138" height="369">
</div>
<div id="spacer-down"></div>
<div id="navigation">
<div class="button1">TEXT1</div>
<div class="button1">TEXT2</div>
<div class="button1">TEXT3</div>
</div>
</header>
<section>
<div id="content">
SECTION 1
</div>
</section>
<footer>
FOOTER
</footer>
</div>
<body>

Related

Having issue with alignment of multiple circular item in a row

I have created a circular shape where I show some percentages. I want to put multiple items in a row.
I tried with div and making display flex and nothing is working properly.
Here is a what I tried so far:
.meal-circular-progress{
position: relative;
height: 100px;
width: 100px;
border-radius: 50%;
background: conic-gradient(#7d2ae8 0deg, #ededed 0deg);
display: flex;
align-items: center;
justify-content: center;
margin:auto;
//transition: background 2s;
//transition-timing-function: ease;
//border: 1px solid red;
}
.meal-circular-progress::before{
content: "";
position: absolute;
height: 80px;
width: 80px;
border-radius: 50%;
background-color: #fff;
//border: 1px solid red;
}
.progress-value{
position: relative;
font-size: 40px;
font-weight: 600;
color: #7d2ae8;
}
<div class="col-sm-6 center">
<div class="meal-circular-progress" ng-style="c.circular">
<span class="progress-value">10%</span>
</div>
<div class="meal-circular-progress" ng-style="c.circular">
<span class="progress-value">10%</span>
</div>
<div class="meal-circular-progress" ng-style="c.circular">
<span class="progress-value">10%</span>
</div>
</div>

You need to make your parent element flexbox. In this case your parent element is center.
Make that element flexbox and use the align-items property to do so:
.center {
display: flex;
align-items: center;
justify-content: center;
}
.meal-circular-progress {
position: relative;
height: 100px;
width: 100px;
border-radius: 50%;
background: conic-gradient(#7d2ae8 0deg, #ededed 0deg);
display: flex;
align-items: center;
justify-content: center;
margin: auto;
}
.meal-circular-progress::before {
content: "";
position: absolute;
height: 80px;
width: 80px;
border-radius: 50%;
background-color: #fff;
}
.progress-value {
position: relative;
font-size: 40px;
font-weight: 600;
color: #7d2ae8;
}
<div class="col-sm-6 center">
<div class="meal-circular-progress" ng-style="c.circular">
<span class="progress-value">5%</span>
</div>
<div class="meal-circular-progress" ng-style="c.circular">
<span class="progress-value">10%</span>
</div>
<div class="meal-circular-progress" ng-style="c.circular">
<span class="progress-value">20%</span>
</div>
</div>

Flex the container
https://codepen.io/mplungjan/pen/xxJEPwx
#container {
display: flex;
flex-direction: row;
min-width: max-content;
max-width: max-content; /* optional */
border: 1px solid black;
}

Overlay one image into another with z-index

I am trying to overlay one image into another but it not working.
My code
body {
background: #000000 50% 50%;
height: 100%
width:100%;
overflow-x: hidden;
overflow-y: hidden;
}
.neer {
z-index: 100;
position: absolute;
}
.mobile {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
gap: 30px;
}
<div class="mobile">
<p style="color: blue; font-size: 40px;">Overlay image</p>
<div class="neer">
<img src="https://growtraffic-bc85.kxcdn.com/blog/wp-content/uploads/2019/02/336-x-280.jpg" />
</div>
<div>
<img src="https://place-hold.it/338x280" />
</div>
</div>
I am not using margin-top or margin-bottom because i am looking in responsive. defining margin sometime break the layout in different structure.

Place both images inside a div with position: relative;. Add this class to the image that should be on top:
.neer {
z-index: 100;
position: absolute;
top: 0;
left: 0;
}
body {
background: #000000 50% 50%;
height: 100%
width:100%;
overflow-x: hidden;
overflow-y: hidden;
}
.neer {
z-index: 100;
position: absolute;
top: 0;
left: 0;
}
.mobile {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
gap: 30px;
}
<div class="mobile">
<p style="color: blue; font-size: 40px;">Overlay image</p>
<div style="position: relative;">
<img src="https://place-hold.it/338x280" />
<img class="neer" src="https://growtraffic-bc85.kxcdn.com/blog/wp-content/uploads/2019/02/336-x-280.jpg" />
</div>
</div>

there are many ways to do that. a simple way using your giving code is to remove flex style from mobile and put it in body.
* {
/* border: 1px solid red; */
}
body {
background: #000000 50% 50%;
height: 100%;
width: 100%;
overflow-x: hidden;
overflow-y: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.neer {
z-index: 100;
position: absolute;
}
.mobile {
/* display: flex; */
/* flex-direction: column; */
/* align-items: center; */
/* justify-content: center; */
height: 100%;
gap: 30px;
}
<div class="mobile">
<p style="color: blue; font-size: 40px;">Overlay image</p>
<div class="neer">
<img src="https://growtraffic-bc85.kxcdn.com/blog/wp-content/uploads/2019/02/336-x-280.jpg" />
</div>
<div class="behind">
<img src="https://place-hold.it/338x280" />
</div>
</div>
a better way is to put both pictures in one div then give them the same position in that div.
* {
/* border: 1px solid red; */
}
body {
background: #000000 50% 50%;
height: 100%;
width: 100%;
overflow-x: hidden;
overflow-y: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.container {
display: flex;
align-items: center;
justify-content: center;
}
.neer {
z-index: 100;
position: absolute;
}
.mobile {
/* display: flex; */
/* flex-direction: column; */
/* align-items: center; */
/* justify-content: center; */
height: 100%;
gap: 30px;
}
<div class="mobile">
<p style="color: blue; font-size: 40px;">Overlay image</p>
<div class="container">
<div class="neer">
<img src="https://growtraffic-bc85.kxcdn.com/blog/wp-content/uploads/2019/02/336-x-280.jpg" />
</div>
<div class="behind">
<img src="https://place-hold.it/338x280" />
</div>
</div>
</div>
If we know why you want to do this, there might be a better way.

The child view fit-content ， the superview sets the scroll properties

The child view fit-content exceeds the parent view width, When the superview sets the scroll properties，The subview displays exceptions。
I want to superview Can scroll display, cut does not affect the subview display。
The child view fit-content exceeds the parent view width, When the superview sets the scroll properties，The subview displays exceptions。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
<style>
.main-container {
width: 300px;
height: 400px;
background-color: green;
}
.title {
width: 100%;
height: 40px;
background-color: red;
}
.tab-contenter {
width: 100%;
margin: 10px 40px 10px 0;
display: flex;
flex-direction: row;
align-items: center;
border-radius: 4px;
}
.tab-contenter-content {
display: flex;
flex-direction: row;
align-items: center;
/* overflow: scroll; */
}
.tab-title-item {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: fit-content;
white-space: nowrap;
overflow: hidden;
cursor: pointer;
margin-right: 10px;
padding: 0 11px;
background: #f5f6f7;
border-radius: 4px;
}
</style>
</head>
<body>
<div class="main-container">
<div class="title">标题</div>
<div class="tab-contenter">
<div class="tab-contenter-content">
<div class="tab-title-item" key="ceshi1">
全部
</div>
<div class="tab-title-item" key="ceshi2">
测试内容超长版本2
</div>
<div class="tab-title-item" key="ceshi3">
测试内容超长版本3
</div>
<div class="tab-title-item" key="ceshi4">
测试内容4
</div>
<div class="tab-title-item" key="ceshi5">
测试内容5
</div>
</div>
</div>
</div>
</body>
</html>
Online code ： https://codesandbox.io/s/xenodochial-raman-wylhk?file=/index.html

Is this what you are looking for?
You have to set flex nowrap to the parent. I have added a class to disable the default browser scrollbar as well
.main-container {
width: 300px;
height: 400px;
background-color: green;
}
.horizontal-scrollbars {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.horizontal-scrollbars::-webkit-scrollbar {
display: none;
}
.title {
width: 100%;
height: 40px;
background-color: red;
}
.tab-contenter {
width: 100%;
margin: 10px 40px 10px 0;
display: flex;
flex-direction: row;
align-items: center;
border-radius: 4px;
}
.tab-contenter-content {
display: flex;
flex-direction: row;
align-items: center;
/* overflow: scroll; */
}
.tab-title-item {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
/* padding: 15px; */
/* height: 100%; */
width: fit-content;
white-space: nowrap;
/* min-width: 53px; */
cursor: pointer;
margin-right: 10px;
padding: 0 11px;
/* border: 1px solid #f2f2f2; */
background: #f5f6f7;
border-radius: 4px;
}
<div class="main-container">
<div class="title">标题</div>
<div class="tab-contenter">
<div class="tab-contenter-content horizontal-scrollbars">
<div class="tab-title-item" key="ceshi1">
全部
</div>
<div class="tab-title-item" key="ceshi2">
测试内容超长版本2
</div>
<div class="tab-title-item" key="ceshi3">
测试内容超长版本3
</div>
<div class="tab-title-item" key="ceshi4">
测试内容4
</div>
<div class="tab-title-item" key="ceshi5">
测试内容5
</div>
</div>
</div>
</div>

Sticky header script doesn't account for variable height of window

I have a sticky header that utilizes the process found here (https://www.w3schools.com/howto/howto_js_sticky_header.asp). This works great. However, this does not account for variable heights of the hero element above the header. When you resize the window vertically, the sticky header breaks until you refresh the browser. What do I need to add to the script so that it detects the new height upon resizing?
Here is a codepen displaying my dilemma: https://codepen.io/JKDESIGN44/pen/VwYBqBV
Here is the javascript:
// STICKY HEADER
document.addEventListener('DOMContentLoaded', function () {
// When the event DOMContentLoaded occurs, it is safe to access the DOM
// When the user scrolls the page, execute myFunction
window.addEventListener('scroll', myFunctionForSticky);
// Get the navbar
var navbar = document.getElementById("c3Header");
// Get the offset position of the navbar
var sticky = navbar.offsetTop;
// Add the sticky class to the navbar when you reach its scroll position.
// Remove "sticky" when you leave the scroll position
function myFunctionForSticky() {
if (window.pageYOffset >= sticky) {
console.log("window.pageYOffset >= sticky");
} else {
console.log("Not window.pageYOffset >= sticky");
}
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky");
} else {
navbar.classList.remove("sticky");
}
}
})

You don't need any JS to accomplish this. All you need are two lines of css to be able to accomplish the same, with way less complexity.
Take a look at this:
html, body, header{
margin: 0px;
padding: 0px;
}
.full-height-section{
height: 100vh;
width: 100%;
position: relative;
}
a{
text-decoration: none;
font-family: 'Montserrat', sans-serif;
color: inherit;
}
li{
list-style-type: none;
text-transform: uppercase;
font-size: 15px;
letter-spacing: 2px;
transition: all 0.1s ease;
}
.bg-aqua{
background-color: #073038;
}
.text-white{
color: #FFFFFF;
transition: all 0.1s ease;
font-family:
}
.text-hover-blue:hover{
color: #7DD2EF;
transition: all 0.1s ease;
}
/* --------------HEADER---- */
/* ----HERO---- */
.hero{
height: 100vh;
width: 100vw;
min-height: 500px;
position: relative;
display: flex;
justify-content: center;
align-content: center;
align-items: center;
}
.hero-text{
font-size: 40px;
text-transform: uppercase;
z-index: 20;
}
.content-hero{
height: 25vh;
width: 100vw;
min-height: 500px;
position: relative;
display: flex;
justify-content: center;
align-content: center;
align-items: center;
}
.hero-bg{
display: block;
object-fit: cover;
z-index: -1;
position: absolute;
min-height: 500px;
}
.hero-logo-wrap{
align-self: center;
height: 30vw;
max-height: 50vh;
min-height: 200px;
z-index: 10;
}
.hero-logo{
height: 100%;
}
.down-arrow-wrapper{
height: 50px;
width: 50px;
position: absolute;
margin: auto;
left: 0;
right: 0;
bottom: 40px;
border-radius: 999px;
background-color: rgba(125,210,239,0.0);
transition: all 0.5s ease;
z-index: 10;
}
.down-arrow-wrapper:hover{
background-color: rgba(125,210,239,1.0);
transition: all 0.5s ease;
transform: scale(1.2)
}
.down-arrow-rel-wrapper{
height: 50px;
width: 50px;
position: relative;
}
.down-arrow{
height: 20px;
width: 20px;
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 8px;
transform: rotate(45deg);
border-right: solid #fff 3px;
border-bottom: solid #fff 3px;
}
.img-overlay{
height: 100%;
width: 100%;
position: absolute;
margin: auto;
top: 0;
mix-blend-mode: overlay;
background: rgb(3,31,36);
background: -moz-linear-gradient(148deg, rgba(3,31,36,1) 0%, rgba(125,210,239,1) 100%);
background: -webkit-linear-gradient(148deg, rgba(3,31,36,1) 0%, rgba(125,210,239,1) 100%);
background: linear-gradient(148deg, rgba(3,31,36,1) 0%, rgba(125,210,239,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#031f24",endColorstr="#7dd2ef",GradientType=1);
}
/* ----HERO END---- */
.header{
height: 150px;
width: 100%;
z-index: 100;
display: flex;
justify-content: center;
position: sticky;
top: 0;
}
.content-header{
width: 100%;
z-index: 100;
display: flex;
flex-direction: column;
}
.sticky{
position: fixed;
top: 0;
width: 100%;
}
.sticky + .page-wrapper{
padding-top: 150px;
}
.nav-flexbox{
height: 150px;
width: 80%;
max-width: 1500px;
min-width: 1000px;
position: relative;
/*
position: absolute;
margin: auto;
left: 0;
right: 0;
*/
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.nav-left{
display: flex;
flex-direction: row;
justify-content: space-between;
text-transform: uppercase;
letter-spacing: 2px;
width: 100%;
}
.nav-center{
width: 70%;
display: flex;
justify-content: center;
align-items: center;
}
.header-logo{
height: 80px;
z-index: 999;
}
.header-logo-link{
transition: all 0.5s ease;
}
.header-logo-link:hover{
transform: scale(1.2);
transition: all 0.5s ease;
}
.nav-right{
display: flex;
flex-direction: row;
justify-content: space-between;
text-transform: uppercase;
letter-spacing: 2px;
width: 100%;
}
.tab-nav-center{
display: none;
}
.tab-nav-right{
display: none;
}
.content-sub-nav{
height: 50px;
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
align-content: center;
}
.sub-nav-arrow {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 30px solid #031F24;
position: absolute;
margin: auto;
bottom: 0;
left: 10px;
}
/* ---------------HEADER END---- */
.content-section{
height: calc(100vh - 150px);
display: flex;
justify-content: center;
align-items: center;
}
<head>
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,700&display=swap" rel="stylesheet">
</head>
<header>
<!----------------
HERO
------------------>
<div class="hero full-height-section">
<div class="hero-logo-wrap">
<img src="http://c3.abettermancc.com/wp-content/uploads/2019/09/Primary-Logo_Vertical.png" class="hero-logo">
</div>
<a href="#c3Header">
<div class="down-arrow-wrapper">
<div class="down-arrow">
</div>
</div>
</a>
<img src="http://c3.abettermancc.com/wp-content/uploads/2019/09/audience-black-and-white-black-and-white-2014773.jpg" class="hero-bg full-height-section">
<!--------------Overlay -->
<div class="bg-aqua" style="width: 100%; height: 100%; position: absolute;
margin: auto; top: 0; opacity: 0.7; z-index: 9;">
</div>
<div class="img-overlay" style="z-index: 9;">
</div>
<!--------------Overlay END -->
</div>
<!----------------
HERO END
------------------>
</header>
<!----------------
NAVIGATION
------------------>
<nav class="header bg-aqua text-white" id="c3Header">
<div class="nav-flexbox">
<div class="nav-left">
<li>who we are</li>
<li>ministries</li>
<li>sermons</li>
</div>
<div class="nav-center">
<a href="#" class="header-logo-link">
<img src="http://c3.abettermancc.com/wp-content/uploads/2019/09/Primary-Icon-01.png" class="header-logo">
</a>
</div>
<div class="nav-right">
<li>get connected</li>
<li>events</li>
<li>give online</li>
</div>
</div>
</nav>
<!----------------
NAVIGATION END
------------------>
<div class="content-section" style="background-color: #888888;">
<p>SECTION 1</p>
</div>
<div class="content-section" style="background-color: #999999;">
<p>SECTION 2</p>
</div>
<div class="content-section" style="background-color: #888888;">
<p>SECTION 3</p>
</div>
The trick was adding:
position: sticky;
top: 0;
To the .header class. The top:0 states that this class content will only get sticky when it reaches 0 offset from the top (meaning, just at the top of the page).

JS How to hide all categorys at page

I work with categorys at web page, an i build next view to show categories. And i create one solution how to categorize all data in app.
But i have issues which i cant resolve.
So problem is, when i first time open my web page, all categories from list visible, and i want, categories need only visible after category items press.
My code:
$(document).ready(function () {
$('.category_list .category_item[category="all"]').addClass('ct_item-active');
$('.category_item').click(function () {
var catProduct = $(this).attr('category');
console.log(catProduct);
$('.category_item').removeClass('ct_item-active');
$(this).addClass('ct_item-active');
$('.product-item').css('transform', 'scale(0)');
function hideProduct() {
$('.product-item').hide();
} setTimeout(hideProduct, 400);
function showProduct() {
$('.product-item[category="' + catProduct + '"]').show();
$('.product-item[category="' + catProduct + '"]').css('transform', 'scale(1)');
} setTimeout(showProduct, 400);
});
});
.wrap {
max-width: 1100px;
width: 90%;
margin: auto;
}
.wrap > h1 {
color: #494B4D;
font-weight: 400;
display: flex;
flex-direction: column;
text-align: center;
margin: 15px 0px;
}
.wrap > h1:after {
content: '';
width: 100%;
height: 1px;
background: #C7C7C7;
margin: 20px 0;
}
.store-wrapper {
display: flex;
flex-wrap: wrap;
}
.category_list {
display: flex;
flex-direction: column;
width: 30%;
}
.category_list .category_item {
display: block;
width: 100%;
padding: 15px 0;
margin-bottom: 20px;
background: #E84C3D;
text-align: center;
text-decoration: none;
color: #fff;
}
.category_list .ct_item-active {
background: #2D3E50;
}
.products-list {
width: 70%;
display: flex;
flex-wrap: wrap;
}
.products-list .product-item {
width: 35%;
margin-left: 3%;
margin-bottom: 25px;
box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.22);
display: flex;
flex-direction: column;
align-items: center;
align-self: flex-start;
transition: all .4s;
}
.products-list .product-item img {
width: 100%;
}
.products-list .product-item a {
display: block;
width: 100%;
padding: 8px 0;
background: #2D3E50;
color: #fff;
text-align: center;
text-decoration: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
<div class="store-wrapper">
<div class="category_list">
Technical
Organizational
</div>
<section class="products-list">
<div class="product-item" category="Technical">
<img src="~/images/100004-200.png" alt="">
Equipment
</div>
<div class="product-item" category="Technical">
<img src="~/images/100004-200.png" alt="">
Tool
</div>
<div class="product-item" category="Organizational">
<img src="~/images/100004-200.png" alt="">
Material
</div>
</section>
</div>
</div>
So as u can see i don't have func which show all categorys at main page.
But when i reload page all categorys is visible, at this moment i'ts 3, but i have more then 3, and i want to show this categorys after pressing category items.

You only need add .products-list .product-item { display:none} to your css.
$(document).ready(function () {
$('.category_list .category_item[category="all"]').addClass('ct_item-active');
$('.category_item').click(function () {
var catProduct = $(this).attr('category');
console.log(catProduct);
$('.category_item').removeClass('ct_item-active');
$(this).addClass('ct_item-active');
$('.product-item').css('transform', 'scale(0)');
function hideProduct() {
$('.product-item').hide();
} setTimeout(hideProduct, 400);
function showProduct() {
$('.product-item[category="' + catProduct + '"]').show();
$('.product-item[category="' + catProduct + '"]').css('transform', 'scale(1)');
} setTimeout(showProduct, 400);
});
});
.wrap {
max-width: 1100px;
width: 90%;
margin: auto;
}
.wrap > h1 {
color: #494B4D;
font-weight: 400;
display: flex;
flex-direction: column;
text-align: center;
margin: 15px 0px;
}
.wrap > h1:after {
content: '';
width: 100%;
height: 1px;
background: #C7C7C7;
margin: 20px 0;
}
.store-wrapper {
display: flex;
flex-wrap: wrap;
}
.category_list {
display: flex;
flex-direction: column;
width: 30%;
}
.category_list .category_item {
display: block;
width: 100%;
padding: 15px 0;
margin-bottom: 20px;
background: #E84C3D;
text-align: center;
text-decoration: none;
color: #fff;
}
.category_list .ct_item-active {
background: #2D3E50;
}
.products-list {
width: 70%;
display: flex;
flex-wrap: wrap;
}
.products-list .product-item {
width: 35%;
margin-left: 3%;
margin-bottom: 25px;
box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.22);
display: flex;
flex-direction: column;
align-items: center;
align-self: flex-start;
transition: all .4s;
display:none;
}
.products-list .product-item img {
width: 100%;
}
.products-list .product-item a {
display: block;
width: 100%;
padding: 8px 0;
background: #2D3E50;
color: #fff;
text-align: center;
text-decoration: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
<div class="store-wrapper">
<div class="category_list">
Technical
Organizational
</div>
<section class="products-list">
<div class="product-item" category="Technical">
<img src="~/images/100004-200.png" alt="">
Equipment
</div>
<div class="product-item" category="Technical">
<img src="~/images/100004-200.png" alt="">
Tool
</div>
<div class="product-item" category="Organizational">
<img src="~/images/100004-200.png" alt="">
Material
</div>
</section>
</div>
</div>

Develop Reference

JavaScript is the programming language of the Web.

Space between div in postion: relative - javascript

Related

Having issue with alignment of multiple circular item in a row

Overlay one image into another with z-index

The child view fit-content ， the superview sets the scroll properties

Sticky header script doesn't account for variable height of window

JS How to hide all categorys at page

Categories

Resources