[]
1i am making an introduction to my page by creating a profile picture positioned halfway the container, and the design is for mobile view.
the container that holds the pic and the name is positioned relative, while the pic is positioned absolute, the content which is contained below is positioned static by default(i think) and i made it to be 100% width to be able to center it.
Problem: the pic is covering the name below it, i tried to make a padding to position it below but when the pic grows bigger, it covers it again, i also tried media queries but this way i will make a break points every 100 px,: i don't think it is practical this way
.container {
position: relative;
min-height: 350px;
background-color: black;
}
.pic {
position: absolute;
width: 30%;
top: -30%;
left: 30%;
}
.content {
width: 100%;
padding-top: 8rem;
text-align: center;
}
<div class="container">
<div class="pic">img</div>
<div class="content">name</div>
</div>
You don't need any fancy absolute positioning for this:
.container {
position: relative;
min-height: 350px;
background-color: black;
margin-top: 4rem;
color: white;
text-align: center;
}
.pic {
margin-top: -1.8rem;
}
<div class="container">
<img src="//i.stack.imgur.com/fVW6p.png?s=48&g=1" class="pic">
<div class="content">name</div>
</div>
Yeah, well, the absolute positioning takes the image out of page flow and positions it relative to the nearest relatively-positioned ancestor, not bothering too much about other elements - so that is actually expected behavior. Is there any specific reason why you want your picture to be absolutely positioned? From what you have written, I'd say your best bet would be to go with flexbox as it's easiest to control placement.
Though, to be honest, you could probably go here with just removing absolute positioning, so it's again in the normal flow, and then centering your image div:
.container {
position: relative;
min-height: 350px;
background-color: black;
padding: 1rem;
}
.pic {
width: 30%;
margin: 0 auto;
}
.content {
width: 100%;
padding-top: 3rem;
text-align: center;
color: white;
}
<div class="container">
<div class="pic"><img src="https://picsum.photos/200/150" alt=""></div>
<div class="content">name</div>
</div>
Adding absolute positioning to the .content worked for me.
Related
I'm trying to place fixed element and keep it relative to its container, not the port view.
I made it in chrome.
On Safari however, the fixed element is placed at the bottom of the page, disregarding its parent position and place. For some reason it gets the right place when clicking the container.
I tried to add translate property to the fixed element, it didn't help.
I tried to create the fixed behaviour with absolute position instead of fix, but couldn't make it to work. It moved with the scroll.
Container CSS
.Container {
display: flex;
flex-direction: column;
position: relative;
}
Fixed Element CSS
.Fixed {
font-weight: 300 !important;
width: fit-content;
font-size: 14px !important;
position: fixed;
background: value(CalendarBackground);
bottom: 0;
left: 3px;
width: 100%;
padding-left: 32px;
border-radius: 3px;
height: 68px;
}
EDIT 1 - React Component JSX (HTML TO BE)
<div className={classes.ExpandedEvent}>
// CONTAINER
<div className={classes.Container}>
<div className={classes.TimeContainer}>
<Text className={classes.Time}>{time}</Text>
{recurrenceJsx}
</div>
{locationJsx}
{summaryJsx}
{attachmentsJsx}
</div>
// FIXED
<TextButton onClick={_onCopyClick} className={classes.Fixed}>{t('Google_Calendar_Copy')}</TextButton>
</div>
EDIT 2 - LIVE EXAMPLE
https://itaytur.github.io/wix-calendar/?path=/story/calendar--desktop-agenda
I deployed the component so it could be seen live. not all the css was loaded sorry in advance, but for reproduce the bug it works.
click the first event from the top, called: CLICK TO SEE FIXED 'COPY TO CALENDAR' BTN IN THE POPUP BOTTOM - NOT SHOWING ON SAFARI.
in chrome the copy button is shown and sticks to the bottom of the popup even when scrolling, in safari it doesn't shown at all.
Because fixed item doesn't care about relative container
You can use absolute position inside a fixed element
But there is already a lot of post about it:
Juste take a look here:
Fixed position but relative to container
Can I position an element fixed relative to parent?
You can also take a look to sticky property: https://www.w3schools.com/howto/howto_css_sticky_element.asp
.wrapper{
width: 100%;
padding: 40px;
background: yellow;
}
.relative-item{
width: 200px;
height:100vh;
background: green;
}
.fixed-item-wrap{
position: fixed;
width: 200px;
height:100vh;
}
.fixed-item{
background: red;
color: white;
position: absolute;
top: 20px;
}
<div class="wrapper">
<div class="relative-item">
<div class="fixed-item-wrap">
<div class="fixed-item">
I'm fixed but relative !
</div>
</div>
</div>
</div>
Here's an example of what I think it is that you're trying to achieve.
If you want the child position to be relative to it's initial position, you should set it's position as relative.
.Container {
background: red;
padding: 50px;
}
.Relative {
background: white;
font-weight: 300 !important;
font-size: 14px !important;
position: relative;
bottom: 20px;
border: 1px solid black;
left: 55px;
padding-left: 32px;
border-radius: 3px;
height: 68px;
}
<div class="Container">
<div class="Relative">
My position is relative to my initial position
</div>
</div>
I am trying to get my child div section to all the way to the top and bottom of the parent div section. Go to the bottom of this Example URL (where the Canadian Flag Stand Up Paddle Boarders are): https://www.lakeshoresup.com/product/pathfinder/
Basically if I set the width larger than 41% I get a small area that doesn't go to the top and bottom of the section.
Code:
<div class="hero__container container">
<div class="hero__content-wrapper" style="background-color: rgba(0,0,0,0.2); flex: 60% ; max-width: 60%;">
<h1 class="hero__title hero__title--big">
Adrift in the Canadian Rockies</h1>
<p class="hero__content hero__content--medium">
Jake and Lyndsay embark on a Lakeshore adventure with their inflatable paddleboards. </p>
<div class="primary-link">
<a href="https://www.lakeshoresup.com/2015/07/28/adrift-in-the-canadian-rockies-with-jake-lyndsay-part-1/" class="hero__primary-link btn" target="_blank">
Read Their Story </a>
</div>
</div>
</div>
CSS
.hero--right .container {
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.hero__content-wrapper {
padding-left: 20px;
padding-right: 20px;
display: table-cell;
vertical-align: top;
}
I have tried to add min-height:760px to the css which worked but isn't dynamic. When the site goes to mobile or if the slider boxes are different sizes it breaks the image.
Is there a dynamic way to make the child box (.hero__content-wrapper) always extend to the top of the parent box (.hero__container)?
Is this something that I can use the CSS below and have it function across all browsers or is there a better way to do it?
height: -moz-available;
height: -webkit-fill-available;
height: fill-available;
I think found a solution to your issue.
.hero__content-wrapper {
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 100%;
}
Also to remove the max-width as it will take the width of the parent. You could also add position:relative to the .hero__container class. Does that solve your problem?
Matt -
Let's dilute the example for readability, but essentially create the same thing:
<div class="container">
<div class="box"></div>
</div>
CSS:
.container {
position: relative;
height: 100px;
width: 100px;
border: 1px solid red;
}
.box {
background: blue;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
Here, we just use CSS Position to set the element's reference to the container's dimensions. Then we target the edges of the boundaries with the top:0, etc - That gives us a blue box with unspecified dimensions, filling its parent container.
I'm trying to make some header for my website and another div below it, to contain a colored rectangle. Is it possible? I tried it like this so far, but no luck:
.logo {
width: 100%;
left: 0%;
right: 0%;
position: absolute;
}
<div class="logo" onclick="location.href='<%= DefaultPath %>'" style="height:15%; top:0%; background-image:url('<%= LogoPath %>'); background-size: 100% 100%; background-repeat:no-repeat">
</div>
<div style="padding:0%">123</div>
The div that contains "123" should be below the header div. How can I do this?
First of all you should not use so much inline styles. rather use it within a css class (like you did for some code in .logo)
you could use something like this to achieve your positioning:
.header {
position: absolute;
top: 0;
left: 0;
height: 50px;
width: 100%;
background-color: grey;
background-image: url('');
background-position: center center;
background-size: 100% 100%;
}
.numbers {
margin-top: 50px;
height: 100px;
background-color: blue;
width: 100%;
}
and the html is simply this:
<div class="header"></div>
<div class="numbers">123</div>
you would simply place your relative container with a margin-top with the height of your absolute container
i don't really like those absolute px solutions with margins.
if this header should always look like this ( with the triangle and the numbers etc) i would suggest to wrap those two containers into one absolute container and position them both relative like you can find here:
.wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.header {
display: block;
height: 50px;
width: 100%;
background-color: grey;
}
.numbers {
height: 100px;
background-color: blue;
width: 100%;
}
<div class="wrapper">
<div class="header"></div>
<div class="numbers">123</div>
</div>
The div below, in this scenario, would need the have a margin-top value equal to the height of the absolute positioned div.
<div class="logo" onclick="location.href='<%= DefaultPath %>'" style="height:100px; top:0%; background-image:url('<%= LogoPath %>'); background-size: 100% 100%; background-repeat:no-repeat">
123
Not easy to fix... if you set something absolutely, like you logo there, you break it out of the document flow. Hence, the rest of the page won't care where it is and cannot place itself next to it. It will just be under or over it.
You could detect the position of the logo with javascript and place the other one next to it if it too is aboslute.
I THINK you want to set the logo to position: fixed instead, and add margin-top to the body, so that it always starts where the logo ends. That way the logo would always be on top and follow you when you scroll, and the body wont be covered by the logo.
Most of my code in a jsFiddle:
http://jsfiddle.net/MilkyTech/suxWt/
The content should load on the first page in a white box, with overflowing content pushing the following sections of the page down. However, as can be seen the lower sections load over the top of the first page white box. I have tried changing the positioning/clears of the various sections but cannot seem to create the necessary movement.
<section class="page1">
<div class="huge-title centered">
<div id='detailsbox'>
<h1 id='eorvtitle'></h1>
<img id='eorvimage' src=''>
<div><p>lots of text lots of text
</div>
</div>
</section>
<section class="page2" id='page2'>
</section>
.page1 {
background: url('../img/bg.jpg')#131313;
background-size: cover;
height: 100%;
position: relative;
}
.huge-title {
position: absolute;
top: -20%;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 100%;
height: 180px;
}
#detailsbox {
top: -4em;
width: 75%;
left: 12.5%;
right: 12.5%;
border: 20px solid white;
border-radius: 10px;
background-color: white;
text-align:center;
position: absolute;
float: left;
clear: both;
}
Absolute Positioning does not push containers down. It places itself above or below them based on the z-indexing. You need to enclose your absolute contents inside a relative container to push other containers downwards similar to those in jquery sliders.
you need to change .huge-title and #detailsbox to position:relative;
you can probably get rid of background-size: cover;
also change .huge-title and #detailsbox to the following:
.page1 {
background: url('../img/bg.jpg')#131313;
height: 100%;
position: relative;
}
.huge-title {
position: relative;
top: 20%;
right: 0;
left: 0;
margin: auto;
height: 100%;
}
#detailsbox {
top: -4em;
width: 75%;
left: 12.5%;
right: 12.5%;
border: 20px solid white;
border-radius: 10px;
background-color: white;
text-align: center;
position: relative;
float: left;
clear: both;
}
The proper function of an absolute position is to overlap content. If you want other content to automatically push down then use relative position.
The solution is to create an empty spacer div with float right or left. This would ensure there is space between the two.
Refer this answer
Absolute positioned elements are removed from the main flow of the HTML. That's why it's not pushing the elements below it down. It's now sitting on top of the elements before and after it rather than in between them.
You may want to check this out.
Whether or not absolute positioning makes sense in your case is hard to say without seeing the design you are trying to implement. Using default (aka "static") or perhaps relative positioning will push the other content down below the white box, but without a deign to look at it's hard to tell if that's the real solution.
You can add another empty section between page1 and page2 and give the css below
height: 100%;
Adding an empty div the size of the absolute entity between the absolute entity and other components may help.
I am trying to put simple divs and arrange them, but my child div disappearing from parent div even though I am using parent div with relative and child div with absolute positioning. I want connect_us_01 and registeration divs insideheader_block1. I am working towards responsive webdesign. Many thanks.
JSFiddle
<div id="header">
<div id="header_block1">
<div id ="registeration">reg</div>
<div id ="connect_us_01">social media</div>
</div>
<div id="header_block2">
<div id="crown_logo">logo</div>
<div id="nav">navigation</div>
<div class="contact_No_01">020324234233</div>
</div>
</div>
css
#header {
position: relative;
width: 100%;
background-color: #ff6a00;
}
#header_block1 {
position: relative;
margin: 0 auto;
width: 90%;
background-color: pink;
}
#header_block2 {
margin: 0 auto;
width: 90%;
position: relative;
background-color: aqua;
}
/*----social media & connect us block*/
#connect_us_01 {
position: absolute;
width: 300px;
height: 50px;
right: 0;
background-color: blue;
}
#registeration {
position: absolute;
left: 1px;
width: 200px;
height: 50px;
background-color: brown;
}
Elements with position: absolute are taken out of the content flow, meaning they have no inherent height. Since the children have no height, the parent gets no height either, rendering the children invisible. You could resolve it by giving the parent a static height (as in, for instance, height: 100px), but that's not very practical and not responsive at all.
What you're looking for isn't position: absolute; it's float: left and float: right. Apply those properties to the children and give the parent overflow: hidden (or whatever method of clearing floats works best with your layout) and it'll work just fine.
To show block you refering to just add to #header_block1 a height parameter also.
#header_block1 {
position: relative;
margin: 0 auto;
width: 90%;
height: 50px;
background-color: pink;
}