I'm trying to apply absolute positioning on class car. I expect it to be placed in top-left corner inside rectangle. The current behavior is being placed in top-left corner of the page which I don't want. As far as I know absolute element must be positioned inside its ancestor.
body {
padding: 25px;
}
.car {
position: absolute;
}
#rectangle {
/* display: inline-block;
position: absolute;
top: 150px;
left:25px; */
width: 3324px;
height: 5112px;
background-color: #00b3ee;
}
#intro {
/* position: absolute;
top: 800px;
left:25px; */
border: solid 1px;
padding: 10px;
}
<body>
<div id="intro">
<p>
Floor <b><i>{{ $title }}</i></b> setup successfully finished!
Return to floors.
</p>
</div>
<div id="rectangle">
<img src="{{ url($map_image_path) }}">
<a href="#" class="car" style="position: absolute; top: 0px; left: 0px;">
<img id="dynamic" src="http://localhost/ParkingMinis/public/images/icons/car/reza1.png">
</a>
</div>
</body>
Add position: relative to the #rectangle class. Absolute positioning is relative to the first positioned ancestor.
Hey cheack this out http://learnlayout.com/position.html
#rectangle {
position : relative;
}
Here you go buddy.
body
{
padding: 25px;
}
.car
{
position: absolute;
top: 0 ;
left:0;
padding: 25px;
}
#rectangle
{
position:relative;
width: 3324px;
height: 5112px;
background-color: #00b3ee;
}
#rectangle img{
height: 50px;
}
#intro
{
/* position: absolute;
top: 800px;
left:25px; */
border: solid 1px;
padding: 10px;
}
<div id="intro">
<p>
Floor <b><i>{{ $title }}</i></b> setup successfully finished!
Return to floors.
</p>
</div>
<div id="rectangle">
<img src="{{ url($map_image_path) }}" >
<a href="#" class="car" style="position: absolute; top: 0px; left: 0px;">
<img id="dynamic" src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a">
</a>
</div>
Related
.collection {
margin-bottom: 20px;
}
.collection-content{
position: relative;
padding: 50px 143px;
background-color: #F8F8F2;
background-image: url("../img/collection-bg-img.jpg") ;
}
.collection-leafe-left{
position: absolute;
left: -150px;
top: 40px;
}
.collection-leaves-right{
position: absolute;
right: -350px;
top: 685px;
}
.collection-leafe-left-light{
position: absolute;
left: -216px;
bottom: 170px;
}
<section class="collection">
<div class="container">
<div class=" collection-content ">
<img class="collection-leafe-left" src="https://via.placeholder.com/371 " alt width="371" height="371" >
<img class="collection-leaves-right" src="https://via.placeholder.com/546/592?text=POSITION+IS+NOT+WORKING
C/O https://placeholder.com/ " alt width="546" height="592" >
<img class="collection-leafe-left-light" src="https://via.placeholder.com/314" alt width="314" height="287" >
</div>
</div>
</section>
position:absolute; is not working with collection-right-mix image. Why is that so?
Because of position:absolute; is not working with collection-right-mix image , appear scroll across horizontal.
How to effect position to the collection-right-mix image
Change padding to margin for .collection-content
position: absolute considers the padding part of the width.
Thus, .collection-content { padding: 50px 143px; } would position the absolute children the same as .collection-content { padding: 0; }.
On the other hand, position: absolute does NOT consider the margin part of the width.
So now, the absolutely position children should be positioned as you desired.
.collection {
margin-bottom: 20px;
}
.collection-content {
position: relative;
margin: 50px 143px; /* Changed */
background-color: #F8F8F2;
background-color: #ccc; /* Changed */
background-image: url("../img/collection-bg-img.jpg");
}
.collection-leafe-left {
position: absolute;
left: -150px;
top: 40px;
}
.collection-leaves-right {
position: absolute;
right: -350px;
top: 685px;
}
.collection-leafe-left-light {
position: absolute;
left: -216px;
bottom: 170px;
}
<section class="collection">
<div class="container">
<div class=" collection-content ">
<img class="collection-leafe-left" src="https://via.placeholder.com/371 " alt width="371" height="371">
<img class="collection-leaves-right" src="https://via.placeholder.com/546/592?text=POSITION+IS+NOT+WORKING" alt width="546" height="592">
<img class="collection-leafe-left-light" src="https://via.placeholder.com/314" alt width="314" height="287">
</div>
</div>
</section>
Trying to format icons, inside of a circle, results in an oval being created instead. It also seems like, behaviour changes between the platforms, because, on Google Chrome, they are vertical ovals(See here - https://prnt.sc/1tb2phl)
Have made the codepen example here - https://codepen.io/raicha/pen/dyRjwwa but just in case, code is here too
.container{
position: absolute;
width:6%;
height:6%;
top: 74.63%;
border: 2px solid #E2E3E4;
border-radius: 50%;
box-sizing: border-box;
}
#facebookContainer{
position: absolute;
left: 35%;
right: 87.24%;
}
#instagramContainer {
position: absolute;
left: 45%;
right: 83.59%;
}
#twitterContainer {
position: absolute;
left: 55%;
right: 80.16%;
}
#youtubeContainer {
position: absolute;
left: 65%;
right: 76.72%;
}
#youtube{
position: absolute;
left: 65%;
right: 76.72%;
}
<a href="#">
<div id="facebookContainer" class="container">
<img src="includes\icons\facebook.png" class="social" id="facebook">
</div>
<div id="instagramContainer" class="container">
<img src="includes\icons\instagram.png" class="social" id="instagram">
</div>
<div id="twitterContainer" class="container">
<img src="includes\icons\twitter.png" class="social" id="twitter">
</div>
<div id="youtubeContainer" class="container">
<img src="includes\icons\youtube.png" class="social" id="youtube">
</div>
</a>
And also, maybe there is a better way to organise this stuff? :) Would be nice, if you let me know
You cannot specify container width to be 6% height and 6% width. it takes 6% of total height and 6% of total width which are definitely different values and for a circle you need to specify exact values. For example
height: 3rem or 50px
width: 3rem or 50 px
this code below woks now i specified width and height same on container.
<a href="#">
<div id="facebookContainer" class="container">
<img src="includes\icons\facebook.png" class="social" id="facebook">
</div>
<div id="instagramContainer" class="container">
<img src="includes\icons\instagram.png" class="social" id="instagram">
</div>
<div id="twitterContainer" class="container">
<img src="includes\icons\twitter.png" class="social" id="twitter">
</div>
<div id="youtubeContainer" class="container">
<img src="includes\icons\youtube.png" class="social" id="youtube">
</div>
</a>
<style>
.container {
position: absolute;
width: 50px;
height: 50px;
top: 74.63%;
border: 2px solid #E2E3E4;
border-radius: 50%;
box-sizing: border-box;
overflow: hidden;
}
.comntainer img {
width: 100%;
height: 100%;
}
#facebookContainer {
position: absolute;
left: 35%;
right: 87.24%;
}
#instagramContainer {
position: absolute;
left: 45%;
right: 83.59%;
}
#twitterContainer {
position: absolute;
left: 55%;
right: 80.16%;
}
#youtubeContainer {
position: absolute;
left: 65%;
right: 76.72%;
}
#youtube {
position: absolute;
left: 65%;
right: 76.72%;
}
</style>
I'm trying to create a button on my image. However, I am facing a problem that my button appears under or above it. I've tried to solve this problem with one of the w3 examples, but still same problem. Also, I have other question how to reduce height of this picture? Because if i reduce height it does not work also.
<section>
<button class="btn btn-danger">my_button</button>
<img class="sectionImage" src="images/kendall-henderson-Pj6TgpS_Vt4-unsplash.jpg" alt="Logistics transport">
</section>
.sectionImage {
filter: grayscale(70%);
max-width: 100%;
height: auto;
}
Try this code
section{
position: relative;
}
button{
position: absolute;
left: 0;
bottom: 10px;
z-index: 1;
}
.sectionImage {
filter: grayscale(70%);
max-width: 100%;
height: auto;
}
<section>
<button class="btn btn-danger">my_button</button>
<img class="sectionImage" src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Logistics transport">
</section>
you can try this :
<section>
<img class="sectionImage" src="https://images.unsplash.com/photo-1520050704800-294fd98f29e8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1296&q=60" alt="Logistics transport">
<button class="btn btn-danger">my_button</button>
</section>
with this css :
<style>
section {
position: relative;
}
.sectionImage {
width: 500px;
filter: grayscale(70%);
max-width: 100%;
height: auto;
position: absolute;
top: 0;
left: 0;
}
.btn-danger {
position: absolute;
top: 50px;
left: 50px;
}
</style>
try this for different positioning. Eg: center, top-right, bottom-left etc. Reference: https://www.w3schools.com/howto/howto_css_image_text.asp
.container {
position: relative;
text-align: center;
color: white;
}
/* Bottom left text */
.bottom-left {
position: absolute;
bottom: 8px;
left: 16px;
}
/* Top left text */
.top-left {
position: absolute;
top: 8px;
left: 16px;
}
/* Top right text */
.top-right {
position: absolute;
top: 8px;
right: 16px;
}
.sectionImage {
height: 80%;
width: 100%;
}
/* Bottom right text */
.bottom-right {
position: absolute;
bottom: 8px;
right: 16px;
}
/* Centered text */
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<section class="container">
<button class="bottom-left">Bottom Left</button>
<button class="top-left">Top Left</button>
<button class="top-right">Top Right</button>
<button class="bottom-right">Bottom Right</button>
<button class="centered">Centered</button>
<img class="sectionImage" src="https://media.sproutsocial.com/uploads/2017/02/10x-featured-social-media-image-size.png" alt="Logistics transport">
</section>
Try putting both tags in a container, making them both position absolute, and making the button have a greater z-index. Something like this.
<div id="container" style="overflow:hidden; position:relative;">
<img src="your image" style="position:absolute; z-index:1;">
<button style="position:absolute; z-index:10;top:50px; left:50px;"> TESTING TESTING 123 </button>
</div>
From there you can edit the code for your needs and the button element should appear above the img element
I am trying to make a login form. So far I have managed to hardcode it but once I need to for ex. move one of the wrappers then I got to change every element position in that wrapper. How can I do it so that when moving icon, BG field and text, I only got to change position from one place?
HTML code:
<div id="user-wrapper">
<img id="userfield" src="images/fieldBG.png" alt="Username">
<img id="usericon" src="images/userIcon.png" alt="Username">
<p id="username">
Username
</p>
</div>
<div id="pw-wrapper">
<img id="pwfield" src="images/fieldBG.png" alt="Password">
<img id="pwicon" src="images/pwIcon.png" alt="Password">
<p id="pw">
Password
</p>
</div>
<div id="login-wrapper">
<img id="loginbtn" src="images/loginBtn.png" alt="Login">
<p><a id="login" href="#">
Login
</p>
</div>
CSS code:
#user-wrapper {
position: relative;
top: 100px;
width:1760px;
}
#usericon {
position: absolute;
top: 10px;
left: 740px;
}
#user-wrapper p {
position: absolute;
top: 14px;
left: 840px;
}
#pw-wrapper {
position: relative;
top: 120px;
width:1760px;
}
#pwicon {
position: absolute;
top: 10px;
left: 740px;
}
#pw-wrapper p {
position: absolute;
top: 14px;
left: 840px;
}
#login-wrapper {
position: relative;
top: 140px;
width: 1940px;
}
#login-wrapper p {
position: absolute;
top: 12px;
left: 950px;
}
The whole thing should look like this (but should be editable/positioned with an ease):
Thank You!
Only use
#usericon {
position: absolute;
top: 10px;
float: right;
left: 740px;
}
Okey, I managed to fix it myself.
Instead of width in the wrapper, I had to use left.
For ex.
#user-wrapper {
position:relative;
top:100px;
left:0px;
}
Now I can just only change wrapper parameters top/left and it moves all items inside the wrapper div.
My website, http://dev.markzanghi.com, is rendering incorrectly in firefox and i don't know why.
Every other browser, including IE renders it correctly. The link above will display the mistake. Basically, i need two parts to my header for an animation. Below is my CSS
/*
TOP BAR
*/
.topbar {
height: 75px;
background: url('../img/headerBGtop.png') repeat-x;
}
.bottomTopBar {
background: url('../img/headerBGbottom.png') repeat-x;
height: 6px;
position: relative;
top: 64px;
}
.topbar .headerWrapper {
max-width: 924px;
margin: 0 auto;
padding: 0 5px;
}
.bottomHeader {
position: relative;
top: -11px;
left: 0px;
z-index: 1;
}
.headerArrowImg {
width: 924px;
overflow: hidden;
}
.bottomFiller {
position: relative;
top: -24px;
background: url(/img/headerBGbottom);
height: 11px;
}
#leftBottomHeader {
}
#rightBottomHeader {
top: -35px;
}
.logo {
float: left;
margin-top: 13px;
}
.logo img {
height: 55px;
}
.topbarLinks {
float: right;
text-decoration: none;
position: relative;
top: 44px;
z-index: 10;
}
.topbarLinks a{
color: white;
margin-left:25px;
padding: 10px 0px;
}
.topbar .headerArrowImg img {
max-width: none;
position: relative;
left: -200px;
}
And the HTML:
<header>
<div class="topbar navbar-fixed-top" >
<div class="headerWrapper">
<div class="logo">
<img src="img/homeLogo.png" />
</div>
<div class="topbarLinks">
<a id="workLink" href="#"><img src="img/workLink.png" /></a>
<a id="aboutLink" href="#/about"><img src="img/aboutLink.png" /></a>
<a id="contactLink" href="#/contact"><img src="img/contactLink.png" /></a>
</div>
<div id="bottomHeaderWrap" class="bottomHeader">
<div class="headerArrowImg">
<div id="arrowImgWrapper">
<img src="/img/headerArrowImg.png" />
</div>
</div>
</div>
</div>
<div id="leftBottomHeader" class="bottomFiller">
</div>
<div id="rightBottomHeader" class="bottomFiller">
</div>
</div>
</header>
If anyone has any idea why this is not working, please let me know!
Thanks in advance.
I had the same issue with a menu animation a while back.
The "problem" is that Firefox requires an explicit declaration of both X & Y coordinates when one is declared. On several items you have declared a top (Y), but you have not declared a left or right (X).
Add a left:0 or something and you should be fine. Or, since they are position:relative, you could just convert top to margin-top.