I have come across an interesting moment for myself and would like to figure out how it works.
Here are 2 examples in the sandbox. On one without position: absolute, the opacity is different from where position: absolute is applied. Why does positioning affect the degree of opacity in this case?
.wrapper {
position: relative;
text-align: center;
width: 300px;
}
.text-wrap {
border-bottom: 3px solid #202122FF;
opacity: 0.5;
}
.text {
right: 40%;
bottom: -7px;
position: absolute;
padding: 0 5px;
color: #202122FF;
background-color: white;
}
<div class="wrapper">
<div class="text-wrap">
<span class="text">
Some text
</span>
</div>
</div>
And the same template without position: absolute
.wrapper {
position: relative;
text-align: center;
width: 300px;
}
.text-wrap {
border-bottom: 3px solid #202122FF;
opacity: 0.5;
}
.text {
right: 40%;
bottom: -7px;
/* position: absolute; */
padding: 0 5px;
color: #202122FF;
background-color: white;
}
<div class="wrapper">
<div class="text-wrap">
<span class="text">
Some text
</span>
</div>
</div>
You have opacity set on the wrapper of that element. If the wrapper has opacity then it will transfer to the children of the element. To fix you need to move the text somewhere on the outside of the element.
.wrapper {
position: relative;
text-align: center;
width: 300px;
}
.text-wrap {
border-bottom: 3px solid #202122FF;
opacity: 0.5;
}
.text {
right: 40%;
bottom: -7px;
position: absolute;
padding: 0 5px;
color: #202122FF;
background-color: white;
}
<div class="wrapper">
<div class="text-wrap">
</div>
<span class="text">
Some text
</span>
</div>
It is not about position, but where stands the span .
.wrapper {
position: relative;
text-align: center;
width: 300px;
}
.text-wrap {
border-bottom: 3px solid #202122FF;
opacity: 0.5;
line-height:0/* span/text will overflow now */
}
.text {
right: 40%;/* no effect on static position*/
bottom: -7px;/* no effect on static position*/
/* position: absolute; */
padding: 0 5px;
color: #202122FF;
background-color: white;
}
<div class="wrapper">
<div class="text-wrap">
<span class="text">
Some text
</span>
</div>
</div>
Related
This question already has answers here:
Position absolute but relative to parent
(5 answers)
Closed 2 years ago.
As you can see in the code below, the absolutely positioned black screen div covers the members's username but not the actual image. The image stays over the black screen as if it has high z-index, but it doesn't. Is there any way to make the black screen cover the image without completely rewriting the CSS?
.members {
width: 239px;
background-color: #2f3136;
}
.member {
display: flex;
align-items: center;
padding: 30px 20px 30px 20px;
}
.member-image-container {
position: relative;
margin-right: 10px;
}
.member-image {
width: 32px;
height: 32px;
border-radius: 50%;
}
.member-username {
font-weight: 500;
color: #8e9297;
margin-right: 10px;
}
.crown {
color: #faa61a;
}
.online-indicator,
.offline-indicator
{
width: 10px;
height: 10px;
border-radius: 50%;
position: absolute;
bottom: 0;
right: 0;
}
.online-indicator {
background-color: #43b581;
}
.offline-indicator {
background-color: #747f8d;
}
.black-screen {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.8);
}
<div class='navigation'>
<div class='modal'>
<div class="black-screen"></div>
</div>
</div>
<div class='server'>
<div class="members">
<div class="member">
<div class="member-image-container">
<img class='member-image' src="https://api.adorable.io/avatars/100/BozhidarKabzamalov">
<div class='online-indicator'></div>
</div>
<span class='member-username'>Username</span>
</div>
</div>
</div>
Just add position: relative; in member-username
Hope it will work.
.members {
width: 239px;
background-color: #2f3136;
}
.member {
display: flex;
align-items: center;
padding: 30px 20px 30px 20px;
}
.member-image-container {
position: inherit;
margin-right: 10px;
}
.member-image {
width: 32px;
height: 32px;
border-radius: 50%;
}
.member-username {
font-weight: 500;
color: #8e9297;
margin-right: 10px;
position: inherit;
}
.crown {
color: #faa61a;
}
.online-indicator,
.offline-indicator
{
width: 10px;
height: 10px;
border-radius: 50%;
position: absolute;
bottom: 0;
right: 0;
}
.online-indicator {
background-color: #43b581;
}
.offline-indicator {
background-color: #747f8d;
}
.black-screen {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.8);
}
<div class='navigation'>
<div class='modal'>
<div class="black-screen"></div>
</div>
</div>
<div class='server'>
<div class="members">
<div class="member">
<div class="member-image-container">
<img class='member-image' src="https://api.adorable.io/avatars/100/BozhidarKabzamalov">
<div class='online-indicator'></div>
</div>
<span class='member-username'>Username</span>
</div>
</div>
</div>
I want to make a line in the middle of the divs. In the following image, the line should be in the middle of the red boxes.
I'm trying to do that using the line height, but not able to.
Here's the code:
HTML/CSS:
.wrap {
text-align: center;
margin: 20px;
}
.links {
padding: 0 10px;
border-top: 1px solid #000;
height: 1px;
line-height: 0.1em;
}
.dot {
width: 20px;
height: 20px;
background: red;
float: left;
margin-right: 150px;
position: relative;
top: -10px;
}
<div class="wrap">
<div class="links">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
Demo:
https://jsfiddle.net/nkq468xg/
You can use Flexbox on links and for line you can use :before pseudo-element on wrap element.
.wrap {
text-align: center;
margin: 20px;
position: relative;
}
.links {
padding: 0 10px;
display: flex;
justify-content: space-between;
position: relative;
}
.wrap:before {
content: '';
position: absolute;
top: 50%;
left: 0;
border-top: 1px solid black;
background: black;
width: 100%;
transform: translateY(-50%);
}
.dot {
width: 20px;
height: 20px;
background: red;
}
<div class="wrap">
<div class="links">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
Here's one where the line is actually on top, but it does add another element to the HTML:
https://jsfiddle.net/nkq468xg/2/
.wrap {
text-align: center;
margin: 20px;
}
.links {
height: 20px;
position: relative;
}
hr {
border: 0;
height: 1px;
background: black;
position: absolute;
top: 1px;
width: 100%;
}
.dot {
width: 20px;
height: 20px;
background: red;
float: left;
margin-right: 150px;
}
<div class="wrap">
<div class="links">
<hr>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
You can use pseudo element, like ::after
.links {
padding: 0 10px;
overflow: auto; // Your div will have the height of the overflowing elements
}
.links::after {
content: '';
width: 100%;
height: 1px;
background: black;
display: block;
position: relative;
top: 10px;
}
Check your code snippet in your question here on SO ("Run code snippet" blue button), is that what you need?
Added position: relative; top: -10px; in your code for .dot.
.dot {
position: relative;
top: -10px;
}
Fiddle: https://jsfiddle.net/nkq468xg/3/
I have icons that I want centered both horizontally and vertically.
See codepen and snippet below:
div {
border: 1px solid black;
}
.icon-placeholder {
height: 34px;
overflow: hidden;
width: 34px;
}
.icon {
color: hotpink;
font-size: 400%;
}
.icon::before {
content: '+';
}
<div class="icon-placeholder">
<span class="icon"></span>
</div>
How can I do that regardless of .icon's font size.
I have tried transform, position: absolute, display: table with no luck. I can't use flex.
You can achieve it using transform and absolute positioning
div {
border: 1px solid black;
margin: 10px;
}
.icon-placeholder {
height: 34px;
overflow: hidden;
width: 34px;
position: relative;
}
.icon {
color: hotpink;
font-size: 400%;
margin-top: -10%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
left: 50%;
}
.icon::before {
content: '+';
}
.plus-symbol{
font-size: 400%;
outline: dotted 1px red;
color: hotpink;
}
.left, .right{
width: 45%;
padding: 20px;
box-sizing: border-box;
}
.left{
float: left;
}
.right{
float: right;
}
.custom-plus-icon, .custom-plus-icon:before{
position: absolute;
width: 10%;
border-radius: 1px;
background-color: hotpink;
height: 80%;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.custom-plus-icon:before{
content: '';
width: 100%;
height: 100%;
transform: rotate(90deg);
}
<div class="left">
<h3>Plus symbol using font</h3>
<span class="plus-symbol">+</span>
<br/>
<br/>
<label>Font-size : 400%</label>
<div class="icon-placeholder">
<span class="icon"></span>
</div>
<label>Font-size : 300%</label>
<div class="icon-placeholder">
<span class="icon" style="font-size: 300%;"></span>
</div>
<label>Font-size : 200%</label>
<div class="icon-placeholder">
<span class="icon" style="font-size: 200%;"></span>
</div>
<label>Font-size : 100%</label>
<div class="icon-placeholder">
<span class="icon" style="font-size: 100%;"></span>
</div>
</div>
<div class="left">
<h3>Plus symbol using pseudo element</h3>
<div class="icon-placeholder">
<span class="custom-plus-icon"></span>
</div>
</div>
On thing to note though, a + isn't necessarily centered in the first place depending on the font.
div {
border: 1px solid black;
}
.icon-placeholder {
height: 34px;
overflow: hidden;
position: relative;
width: 34px;
}
.icon {
color: hotpink;
font-size: 400%;
}
.icon::before {
content: '0';
display: inline-block;
position: absolute;
right: 50%;
bottom: 50%;
transform: translate(50%, 50%);
}
<div class="icon-placeholder">
<span class="icon"></span>
</div>
I have three elements that I want to keep in the same place as the image responsively shrinks.
.main
{
position: relative;
}
.container
{
display: inline;
}
.point
{
display: inline;
position: absolute;
max-width: 15%;
margin-right: 10px;
padding: 3px 7px 3px 5px;
font-size: 12px;
font-weight: bold;
color: #fff;
background: #ff0000;
border-radius(5px);
box-shadow(1px 2px 5px rgba(0,0,0,0.5));
}
.one
{
top: 40%;
left: 10%;
}
.two
{
top: 50%;
left: 40%;
}
.three
{
top: 75%;
left: 20%;
}
<div class="main">
<div class="container">
<div class="point one">1</div>
<div class="point two">2</div>
<div class="point three">3</div>
</div>
<img src="https://i.ytimg.com/vi/M5SHKCxKDgs/hqdefault.jpg" alt="Husky">
</div>
I believe you want it also to scale as the image scales down responsively, so this achieves that effect.
.wrapper {
position: relative;
display: inline-block;
}
.wrapper img { max-width: 100%; }
.point
{
position: absolute;
max-width: 15%;
margin-right: 10px;
padding: 3px 7px 3px 5px;
font-size: 12px;
font-weight: bold;
color: #fff;
background: #ff0000;
border-radius(5px);
box-shadow(1px 2px 5px rgba(0,0,0,0.5));
}
.one
{
top: 40%;
left: 10%;
}
.two
{
top: 50%;
left: 40%;
}
.three
{
top: 75%;
left: 20%;
}
<div class="main">
<span class="wrapper">
<img src="https://i.ytimg.com/vi/M5SHKCxKDgs/hqdefault.jpg" alt="Husky">
<span class="point one">1</span>
<span class="point two">2</span>
<span class="point three">3</span>
</span>
</div>
I am using inline-block to automatically allow the wrapper element to "wrap" around the image no matter what size the image is. I also set max-width: 100% to turn the image into a responsive image (well, it just scales down when the window resizes). Since the points are all %-based, they stay in the right position as the image scales down.
✔ No requirement to have a fixed width and height image/wrapper, so it's responsive
✔ Less HTML required
✔ Works on pretty much any browser besides unsupported old ones
This is a nice trick I've used to do things like "banners" across images and other techniques to position things over images for effects.
Make your container as position relative and set a height and width on it since the child of your container is absolute. Also make your image absolute positop and top 0. See snippet.
.container
{
width: 480px;
height: 360px;
position: relative;
z-index: 100;
position: relative;
}
.main img{
position:absolute;
top:0;}
.point
{
display: inline;
position: absolute;
max-width: 15%;
margin-right: 10px;
padding: 3px 7px 3px 5px;
font-size: 12px;
font-weight: bold;
color: #fff;
background: #ff0000;
border-radius(5px);
box-shadow(1px 2px 5px rgba(0,0,0,0.5));
}
.one
{
top: 40%;
left: 10%;
}
.two
{
top: 50%;
left: 40%;
}
.three
{
top: 75%;
left: 20%;
}
<div class="main">
<div class="container">
<div class="point one">1</div>
<div class="point two">2</div>
<div class="point three">3</div>
</div>
<img src="https://i.ytimg.com/vi/M5SHKCxKDgs/hqdefault.jpg" alt="Husky">
</div>
Set width and height for your img tag.
.main
{
position: relative;
}
.container
{
display: inline;
}
.point
{
display: inline;
position: absolute;
max-width: 15%;
margin-right: 10px;
padding: 3px 7px 3px 5px;
font-size: 12px;
font-weight: bold;
color: #fff;
background: #ff0000;
border-radius(5px);
box-shadow(1px 2px 5px rgba(0,0,0,0.5));
}
.one
{
top: 40%;
left: 10%;
}
.two
{
top: 50%;
left: 40%;
}
.three
{
top: 75%;
left: 20%;
}
img{
width:100%;
height:100%;
}
<div class="main">
<div class="container">
<div class="point one">1</div>
<div class="point two">2</div>
<div class="point three">3</div>
</div>
<img src="https://i.ytimg.com/vi/M5SHKCxKDgs/hqdefault.jpg" alt="Husky">
</div>
The following is my markup:
.play-controls {
.fa-play, .fa-pause {
font-size: 25px;
}
}
.volume-controls {
display: inline-block;
position: relative;
.overlay {
background-color: $highlight;
height: 10px;
border-radius: 5px;
width: 0px;
position: absolute;
z-index: 15;
}
.background {
background-color: $text-color;
width: 100px;
height: 10px;
border-radius: 5px;
position: absolute;
z-index: 10;
}
.circle {
border-radius: 100%;
position:absolute;
background-color: #fff;
border: 1px solid;
height: 15px;
width: 15px;
z-index: 20;
top: -3px;
}
}
.player {
#album-artwork {
width: 80px;
height: 80px;
vertical-align: middle;
display:inline-block;
margin-right: 10px;
}
.wrapper {
display:inline-block;
.information {
margin-bottom: 5px;
#song-title {
font-size: 22px;
font-weight:bold;
margin-right: 5px;
}
#artist-album {
font-size: 18px;
}
}
.progress-bar {
position: relative;
.overlay {
background-color: $highlight;
height: 10px;
border-radius: 5px;
width: 0px;
position: absolute;
z-index: 15;
}
.background {
background-color: $text-color;
width: 600px;
height: 10px;
border-radius: 5px;
position: absolute;
z-index: 10;
}
.circle {
border-radius: 100%;
position:absolute;
background-color: #fff;
border: 1px solid;
height: 15px;
width: 15px;
z-index: 20;
top: -3px;
}
}
}
}
<div class="play-controls">
<i class="fa fa-play" id="playpause"></i>
</div>
<div class="volume-controls">
<div class="background"></div>
<div class="circle"></div>
<div class="overlay"></div>
</div>
<div class="player">
<img id="album-artwork" src="build/images/guero.jpg">
<div class="wrapper">
<div class="information">
<span id="song-title">Go It Alone</span>
<span id="artist-album">Beck - Guero</span>
</div>
<div class="progress-bar">
<div class="background"></div>
<div class="circle"></div>
<div class="overlay"></div>
</div>
</div>
</div>
The divs with classes background, circle, and overlay in volume-controls are all position: absolute; with volume-controls as position: relative;.
Upon making play-controls, volume-controls, and player inline, play-controls is inline with volume-controls, but volume-controls is overlapping the player.
How would I be able to set everything in one line, without any overlapping?
EDIT: JSFiddle
You could float:left; the 3 main parts or display:inline-block; them the issue the player is over the volume-controls is because of the absolute positioned elements in the volume-controls. You could add a width to volume-controls.
.volume-controls {
display: inline-block;
position: relative;
width:150px;
}
Here is the fiddle