In Chrome, a child element with a fixed position inside a parent element with a relative position may appear disconnected from the

If I have an element on my website with a relative position, and within that element I want another element with a fixed position.

The Issue:

In various browsers (FF, IE, Opera) and in earlier versions of Chrome (tested on Chrome version 26.0.1410), the fixed element is positioned relative to the parent's relative position. However, in the current version of Chrome (tested on Chrome version 32.0.1700), this fixed child is displayed without considering its parent's relative position.

#parent-element {
  border: 1px solid red;
  height: 100px;
  position: relative;
  top: 50px;
  width: 90%;
}

#child-element {
  background-color: yellow;
  height: 100px;
  width: 100px;
  position: fixed;
}
<div id="parent-element">
  <div id="child-element"></div>
</div>

View JS Fiddle for demonstration

Answer №1

Seems like you might be looking for the "absolute" position value rather than the "fixed" value. It's unclear why or when this change might have occurred, but based on w3c standards - Fixed: The element is positioned relative to the browser window. http://www.w3schools.com/cssref/pr_class_position.asp

http://jsfiddle.net/9q3v6/3/

 #parent-element{
     border: 1px solid red;
     height: 100px;
     position: relative;
     top: 50px;
     width: 90%;
 }
 #child-element{
     background-color: yellow;
     height: 100px;
     width: 100px;
     position: absolute;
 }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to alter the color of the text cursor using html/css?

I'm a beginner when it comes to HTML and CSS, so my knowledge about them is quite limited. I recently encountered an issue where my text cursor disappears when the background-color of a <div> element is dark. Here's an example: <style&g ...

Strange floating error in Internet Explorer 7

Working on a webpage at this link, I have structured my HTML as follows: <div id="wrapper"> <div id="main"> <div class="images"> <p>Content</p> <div class="clear"></div> ...

Creating a three-column HTML form layout solely with CSS, and steering clear of any libraries or dependencies, is a task

Is there a way to implement a three-column HTML form layout according to the design depicted in the linked image? https://i.sstatic.net/XJQzJ.png Shown above is the sample HTML code for the template. What I am looking for is the proper CSS styling to ach ...

The use of JQuery's .show() and .hide() functions may disrupt the functionality of CSS hover

When working with this jsFiddle, it appears that the jQuery .show() function does not behave as expected. Despite the documentation stating that it should revert CSS attributes to their original values, using .show(x).delay(x).hide(x) seems to cause the CS ...

Background does not extend beyond the visible screen area

I'm currently working on a website project for the students at my school, but I've encountered a minor issue. When scrolling left or right, the background doesn't extend to cover the entire page; instead, it stops where the edge of the page ...

Is it possible to exclusively target a child div using JavaScript in CSS, without affecting the parent div?

I'm in the process of developing a calendar feature where users can select a specific "day" element to access a dropdown menu for time selection. The functionality is working fine, but I've encountered an issue. When a user selects a time from th ...

Learn the method to conceal rows within a table simply by toggling a button

I need a function that will hide the rows below a row with a header and button, and only reveal them when another row with a header and button is clicked. When one of the +/- buttons is clicked, it should hide or expand all the rows with data content. http ...

Scroll the div that is dynamically filled without affecting the scrolling of the main page

My current struggle involves using iScroll in my web project. The goal is to populate a list with articles and slide in a div over the list to display the selected article. While the basic functionality is in place, I face an issue where scrolling through ...

Tips for positioning an image and a navigation bar within a designated container

I'm having trouble getting the logo and navigation bar to align properly inside the container div. The navigation bar always ends up below the logo. I've tried using HTML align attributes, but they haven't resolved the issue. I'm workin ...

Having trouble with basic HTML/CSS functionality not functioning properly

It appears that the stylesheet is correctly linked, but it seems like there might be an issue with the HTML/CSS code. I haven't worked on HTML/CSS in a while, so I could be missing something obvious. Can you help figure out what's wrong? ...

Guide on displaying search results in separate boxes using HTML

I am struggling with organizing my search engine results in separate boxes on my website. Being new to HTML, I am unsure of how to achieve this layout. Currently, all the results are overlapping each other, and it's creating a messy display. Can anyon ...

What is the best way to implement horizontal scrolling in a div with the "inertia" style?

I recently added horizontal scrolling to my website wikiprop.org, following a tutorial from another website. However, I noticed that my scroll does not have the same inertia/momentum effect where it continues scrolling after a swipe and gradually slows dow ...

AngularJs fails to apply style to dynamic content in IE8 when using HTML5

Currently, I am in the process of developing a website with AngularJs and utilizing numerous JS scripts to address compatibility issues with Internet Explorer. I have organized the data in JSON format, and each page is designed to fetch and display differ ...

Issues with Custom Cursor Getting Trapped in the Upper Left Corner

I’m having trouble creating a custom cursor with blend mode exclusion. I've tried a few methods, but for some reason, when I added a cursor with blend modes, it only appears in the top left corner of my page and doesn't move. I want it to be th ...

Can you provide guidance on centering a "frame" and aligning elements within it using CSS?

In creating my webpage, I am looking to design a virtual frame that is centered on the page. Within this frame, I want to be able to align various elements like images, text, and more using CSS properties. Let me explain with an example: I envision being ...

Modifying CSS to ensure compatibility with various browsers

I am curious if it is possible to modify some CSS when viewed in a different browser. For instance, I have this CSS for a flexbox div: .wdFlex { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit- ...

It is crucial to refrain from making any CSS adjustments in Google Chrome

So I encountered an interesting issue on my website. There are two CSS files - main.css and bootstrap.css, with some overlapping styles. I made a change in the bootstrap.css file by adding !important next to the property. Surprisingly, in Firefox, the chan ...

What is the correct way to properly wrap the div component in this code snippet?

I am currently working on implementing a Javascript component that displays pinned locations and related information on a map. I have made some progress with the implementation, but unfortunately, it does not appear correctly in the actual site. There is a ...

Is it possible to decrease the HTML font size when making the website responsive?

I made the entire website using rem units due to utilizing the bootstrap 4 alpha version. Now, I am ready to begin the responsive design of the site. My html {font-size: 16px} declaration is set, so I am wondering if I can adjust the size of html in the m ...

Unable to perform the 'setSelectionRange' function on the 'HTMLInputElement' due to the input element's type being 'number', which does not allow selection

My attempt to enable text selection in an input box upon user click by using the code snippet below was unsuccessful: <input type="number" onclick="this.setSelectionRange(0, this.value.length)" name="quantity" /> Instead of achieving the desired ef ...