Switching from fixed positioning to fluid

Question

Switching from fixed positioning to fluid

After hastily creating a web widget in jsFiddle with absolute positioning for prototyping purposes, I now find myself struggling to convert it to relative positioning. In addition, I am working on transforming it into a jQuery UI widget and need everything to seamlessly integrate onto the page without any complications.

You can view the widget HERE. Essentially, it is a search box that allows for filtering with the left-most button.

The key components are:

#refine: The left-most button.
#refineDropdown: The dropdown menu that appears when you click on the refine button.
#search: The input box.
#dropdown: The live-type search filtering box.
#submit: The right-most search button.

Question: When developing a widget, should positioning be relative or absolute? If there are multiple instances of this widget on a page, the position of the dropdowns should be independent of their location on the page. However, I am struggling with understanding how to achieve this using positioning and HTML structure.

CSS Code:

(CSS code will not be displayed here)

css positioning

Answer 1

Answer №1

It is commonly believed that relative positioning is preferred over absolute positioning because absolute positioning is thought to always be based on the page itself. However, this is not true.

In reality, absolute positioning is determined by the first parent element with a set position attribute. To address this, one simple solution is to enclose your widget within a div and specify that div's position as relative.

For instance:

<p>adsadds
   <div class='container'>
       <div class='absolutelyPositioned'>BlaBla</div>
   </div>
sddasda</p>

Using the following CSS:

.container
{
    position: relative;
}

.absolutelyPositioned
{
    position: absolute;
    top: 100px;
    left: 100px;
}

The inner div containing "BlaBla" will now be positioned relative to the container div rather than the web page coordinates, adjusting accordingly if the content layout changes.

Answer 2

It is commonly believed that relative positioning is preferred over absolute positioning because absolute positioning is thought to always be based on the page itself. However, this is not true.

In reality, absolute positioning is determined by the first parent element with a set position attribute. To address this, one simple solution is to enclose your widget within a div and specify that div's position as relative.

For instance:

<p>adsadds
   <div class='container'>
       <div class='absolutelyPositioned'>BlaBla</div>
   </div>
sddasda</p>

Using the following CSS:

.container
{
    position: relative;
}

.absolutelyPositioned
{
    position: absolute;
    top: 100px;
    left: 100px;
}

The inner div containing "BlaBla" will now be positioned relative to the container div rather than the web page coordinates, adjusting accordingly if the content layout changes.

Switching from fixed positioning to fluid

Answer №1

Similar questions

Intermittent rendering problems in Chrome due to CSS printing with a fixed header and footer

Challenges with styling DIV elements using CSS

The CSS3 animations are lightning quick and the background image appears slightly unsteady

Switching downlink to top link when scrolling downwards

Examples of how to specify a child class in CSS

Expand the object by clicking on it, causing the surrounding objects to move outside the viewport instead of appearing below

Ways to style the horizontal div using CSS

What's causing Angular to not display my CSS properly?

Obtaining the Initial Values of a jQueryUI Slider

Leveraging the ng-hide property of one controller to adjust the ng-style attribute of another controller through a centralized global controller

Assistance with CSS Selectors in Selenium WebDriver for Date Selection

Update the picture and assign a class for the currently selected menu or button

The picture does not occupy the entire page

I need either XPATH or CSS to target a specific checkbox within a list of checkboxes wrapped in span tags

Glass-pane or angular/HTML overlay on a designated element

Encase a table cell containing a lengthy word

positioned absolutely with a margin of 0 auto

When using WYSIWYG editors, be on the lookout for empty paragraphs and incorrect code in CSS, JavaScript, and

when an element is hovered over, it activates a reaction on a different element

Struggling to ensure buttons on my page respond and resize properly alongside the other elements