The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Position absolute: The bag should always hanging from the pipe
kayut
post Aug 4 2017, 03:13 AM
Post #1





Group: Members
Posts: 2
Joined: 9-November 12
Member No.: 18,086



Hi guys,

I'm experimenting with absolute position in CSS and have created the following example:

https://codepen.io/itsthomas/pen/gxMVqE

As you can see in desktop-view the handbag is hanging from the pipe. My problem
is that if I reduce the browser width, the position of the handbag changes, so that it comes bellow the pipe.

What should I change that the bag is always hanging form the pipe and doesn't change it's position?

Thanks
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 4 2017, 03:32 AM
Post #2


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,767
Joined: 9-August 06
Member No.: 6



You need to create a positioning context. As it is now the images are positioned relative the viewport. You do that by giving a containing element position: relative. #wrapper works fine. This doesn't change anything with #wrapper, more than that boxes it contains can be positioned relative its edges.

The percentages for the bag seems to be off too, especially when the code is taken out of the codepen context. I didn't calculate the numbers, just trial and error. I'm lazy. Hope I got it right. wink.gif


CODE
.wrapper {
  width: 100%;
  max-width: 2600px;
  margin: 0 auto;
  position: relative
}
img {
  width: 100%;
  height: auto;
}
.bag {
  width: 11.230%;
  position: absolute;
  right: 21%;
  top: 8.7%;
}
.pipe {
  width: 0.576%;
  position: absolute;
  left: 73%;
  top: 0;
}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 21st November 2017 - 06:07 PM