I am trying to make a layout where #txt-bar and #main-content-area will overlap on #image. ( #txt-bar is overlapping on #image with following CSS ) but to achieve overlapping of #main-content-area on #image if I use top:-60px at #main-content-area then it will leave a gap between #main-content-area and #footer. I don't know how to solve this issue. Please help me.
/* CSS */
body {
position: absolute;
}
#top-bar {
background-color: black;
color: white;
}
#txt-bar {
height: 40px;
background-color: pink;
position: relative;
z-index: 4;
}
#link-bar {
background-color: red;
height: 40px;
z-index: 4;
}
#image {
position: relative;
z-index: 3;
}
.line {
width: 100%;
position: relative;
border-bottom: 4px solid black;
}
#main-content-area {
position: relative;
background-color: red;
top: -60px;
z-index: 4;
}
#footer {
background-color: green;
position: relative;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-sm-6" id="txt-bar">
<h1>Greetings</h1>
</div>
<div class="col-sm-6" id="link-bar">
<h1>Link bar </h1>
</div>
</div>
<div class="row">
<div class="col-sm-12" id="image">
<img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300" class="img-responsive" />
</div>
</div>
<div class="line"></div>
<div class="row">
<div class="col-sm-2">
</div>
<div class="col-sm-8" id="main-content-area">
<h1>Main content area </h1>
</div>
<div class="col-sm-2">
</div>
</div>
<div class="row" id="footer">
<div class="col-sm-12">
<h1>Footer Element </h1>
</div>
</div>
</div>
Wrap all divs (#txt-bar #main-content-area and #image) in a parent div with position:relative then use position:absolute for #main-content-area and #txt-bar, this will solve your issues.
.wrap{position:relative;max-width:300px;}
#txt-bar {
height: 40px;
background-color: pink;
position: absolute;
top:10px;
width:100%;
}
#main-content-area {
position: absolute;
bottom:10px;
width:100%;
background-color: red;
}
<div class=wrap>
<div id=txt-bar>txt-bar</div>
<div id=image><img src=https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300></div>
<div id=main-content-area>main-content-area</div>
</div>
More Info
Related
How can I make sticky sidebar, but start sticky after the whole right sidebar has been seen while scrolling. Because at the moment only when you go all the way down you can see the right side all parts
.wrapper {
display: flex;
gap: 24px;
position: relative;
}
.left {
width: 70%;
}
.right {
width: 30%;
}
.sticky {
position: sticky;
top: 10px;
}
.box {
border: 1px solid;
height: 300px;
}
.box1 {
height: 400px;
background: green;
}
.box2 {
height: 200px;
background: pink;
}
<div class="wrapper">
<div class="left">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
<div class="right">
<div class="sticky">
<div class="box1">
box 1
</div>
<div class="box2">
box 2
</div>
</div>
</div>
</div>
So I need both block1 and block2 when you start scrolling to be seen first, and after that to stay sticky. Can someone help please
header {
background: blue;
color: white;
width: 100%;
}
.container {
background: green;
text-align: center;
width: 100%;
height: 100px;
transform: skew(0, -10deg);
color: white;
position: relative;
top: 55px;
}
.container .home{
position:absolute;
bottom:0;
}
<header class="header">
<div class="logo">
<i class="fab fa-accusoft"></i>
<span class="title">DreamCoding</span>
</div>
<section class="container">
<div class="home">
<div class="title">Alphabet</div>
<div class="text">
abcdefg
</div>
</div>
</section>
I have the box and the box.
I'm trying to cover the container box by the header box.
The problem is that the box was covered by the , box again and again.
I'm not sure I explained properly cause English is not my mother tongue.
Anyway, Thanks in advance.
Just add the z-index property to both the elements. Runnable code snippet below:
header {
background: blue;
color: white;
width: 100%;
z-index: 1;
}
.container {
background: green;
text-align: center;
width: 100%;
height: 100px;
transform: skew(0, -10deg);
color: white;
position: relative;
top: 55px;
z-index: -1;
}
.container .home {
position: absolute;
bottom: 0;
}
<html>
<body>
<header class="header">
<div class="logo">
<i class="fab fa-accusoft"></i>
<span class="title">DreamCoding</span>
</div>
<section class="container">
<div class="home">
<div class="title">Alphabet</div>
<div class="text">
abcdefg
</div>
</div>
</section>
</header>
</body>
</html>
**The z-index property is used to make elements overlap others.
You can set background in :before selector using position:absolute and z-index:-1
body{
margin: 0;
}
header {
background: blue;
color: white;
width: 100%;
}
.container {
text-align: center;
width: 100%;
height: 100px;
color: white;
position: relative;
top: 55px;
}
.container:before {
content:"";
transform: skew(0, -10deg);
background: green;
width: 100%;
height: 100%;
position:absolute;
top:-25px;
left: 0;
z-index: -1;
}
.container .home{
position:absolute;
bottom:0;
}
<header class="header">
<div class="logo">
<i class="fab fa-accusoft"></i>
<span class="title">DreamCoding</span>
</div>
<section class="container">
<div class="home">
<div class="title">Alphabet</div>
<div class="text">
abcdefg
</div>
</div>
</section>
</header>
How can we show a div on top of div which is positioned using transform CSS property? I want to display handlers always on top of other cells. In the below sample, I always want to show ltHandler, rbHandler on top of any other divs? Can we override(display on top) CSS transform positioned elements with other cells using z-index or any other way?
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
.row {
position: absolute;
height: 28px;
}
.cell {
display: inline-block;
position: absolute;
width: 150px;
height: 150px;
color: red;
border: 1px solid black;
}
.left-top-handler,
.right-bottom-handler {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: red;
position: absolute;
z-index: 999 !important;
cursor: nwse-resize;
touch-action: none;
}
.left-top-handler {
left: -10px;
top: -10px;
}
.right-bottom-handler {
right: -10px;
bottom: -10px;
}
#cell1 {
left: 0px;
}
#cell2 {
left: 150px;
}
#cell3 {
left: 300px;
}
#row2 {
transform: translateY(150px);
}
#row3 {
transform: translateY(300px);
}
#row3 .cell{
background-color:yellow;
}
</style>
</head>
<body>
<div id="row1" class="row">
<div id="cell1" class="cell">
<div>fjsdjkfgjk</div>
</div>
<div id="cell2" class="cell">
<div>fjsdjkfgjk</div>
</div>
<div id="cell3" class="cell">
<div>fjsdjkfgjk</div>
</div>
</div>
<div id="row2" class="row">
<div id="cell1" class="cell">
<div>fjsdjkfgjk</div>
</div>
<div id="cell2" class="cell">
<div>fjsdjkfgjk</div>
<div id="ltHandler" class='left-top-handler handler'></div>
<div id="rbHandler" class='right-bottom-handler handler'></div>
</div>
<div id="cell3" class="cell">
<div>fjsdjkfgjk</div>
</div>
</div>
<div id="row3" class="row">
<div id="cell1" class="cell">
<div>row3 cell1</div>
</div>
<div id="cell2" class="cell">
<div>row3 cell2</div>
</div>
<div id="cell3" class="cell">
<div>row3 cell3</div>
</div>
</div>
</body>
</html>
Set row3 z-index to -1 like this
#row3 {
transform: translateY(300px);
z-index: -1;
}
I would center a div inside another div vertically.
I have tried using table cell as mentioned in some answers in the site but that does not work I always get the div in top
CSS
.height1 {
height:60px;
line-height:60px
}
.row {
border: 1px solid black;
}
.indicator {
width :20px;
height:20px;
background-color: black;
vertical-align: middle
}
.badge {
display:inline-block;
}
.parent {
display: table-cell;
}
HTML
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-8 height1"> TEXTE</div>
<div class="col-md-4 parent">
<div class="badge indicator">testing</div>
</div>
</div>
</div>
Here's a demo
See the updated snippet below.
.height1, .parent {
line-height:60px
}
.row {
border: 1px solid black;
}
.indicator {
height:20px;
background-color: black;
vertical-align: middle
}
.badge {
display:inline-block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-8 col-md-8 height1"> TEXTE</div>
<div class="col-xs-4 col-md-4 parent">
<div class="badge indicator">testing</div>
</div>
</div>
</div>
HTML
<div class="parent">
<div class="child"></div>
</div>
By using the following method you can get that approach. And it will be better solution to maintain the div's.
.parent {
width: 100px;
height: 100px;
background-color: yellow;
position: relative;
}
.child {
height: 50px;
width: 50px;
background-color: blue;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
So I have this html and this css. I want the .big elements be displayed in the corners of my .About
This is how it looks like so far using this code
The output of the code
I would like the first .big .box from the .left-box .container to be displayed on the top of .left-box .container and the first .big .box from the .right-box .container to be displayed on the top of .right-box .container. Rest of the div's should stay the same as they are.
.box {
width: 100%;
height: 300px;
position: relative;
border: 1px solid black;
}
.container {
display: inline-block;
width: 33%;
}
.big {
height: 400px;
}
.arrow {
border: 1px solid green;
position: absolute;
width: 20px;
height: 20px;
}
img {
position: absolute;
width: 100%;
height: 300px;
}
.top {
top:0
}
.middle {
top:50%;
margin-top:-10px;
}
.bottom {
bottom:0
}
.left {
left:0;
}
.center {
left:50%;
margin-left:-10px;
}
.right {
right:0;
}
<div class="About">
<div class="left-box container">
<div class="big box">
<div class="arrow bottom right"></div>
</div>
<div class="big box">
<div class="arrow top right"></div>
</div>
</div>
<div class="middle-box container">
<div class="box">
<div class="arrow bottom center"></div>
</div>
<div class="box">
<img src="images/marks.jpg" alt="marks" />
</div>
<div class="box">
<div class="arrow top center"></div>
</div>
</div>
<div class="right-box container">
<div class="big box">
<div class="arrow bottom left"></div>
</div>
<div class="big box">
<div class="arrow top left"></div>
</div>
</div>
</div>