Changing the CSS from "position: fixed" to "position: absolute"

Is there a way to make the div .box fixed within an absolute position div? My code doesn't seem to work, any suggestions on how to achieve this?

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: 90%;
  border: 1px solid black;
  overflow-y: auto;
}

.box {
  position: fixed;
  height: 50px;
  width: 90%;
  top: 0;
  left: 50%;
  transform: translate(-50%);
  border: 1px solid black;
}
<div class="container" align="center">
  <div class="box">This div in fixed position does not stay fixed</div>
  <div style="margin-top: 55px">Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
</div>

htmlcss

Answer №1

Consider utilizing position: sticky.

A sticky element switches between being relative and fixed, based on the scroll position. It remains relative until it reaches a specific offset position in the viewport, after which it "sticks" in place (similar to position:fixed).

I have updated your code, please see below for the changes.

Note: Internet Explorer, Edge 15, and older versions do not support sticky positioning. Safari requires a -webkit- prefix. You must also define at least one of top, right, bottom, or left for sticky positioning to function correctly.

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: 90%;
  border: 1px solid black;
  overflow-y: auto;
}

.box {
  position: sticky;
  height: 50px;
  width: 100%;
  top: 0;
  border: 1px solid black;
}
<div class="container" align="center">
  <div class="box">This div using fixed position does not stay fixed</div>
  <div style="margin-top: 55px">Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
</div>

Answer №2

.content {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: 90%;
  border: 1px solid black;
  overflow-y: auto;
}

.square {
  position: fixed;
  height: 50px;
  width: 90%;
  top: 0;
  border: 1px solid black;
  background-color: white;
}
<div class="content" align="center">
  <div class="square">This fixed div will stay in place</div>
  <div style="margin-top: 55px">Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
</div>

Is this the solution?

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

Adding a copyright statement to the footer of the page

I'm currently working on constructing a webpage using Kompozer on my Mac. The background image I am using is 2004px x 1471px in size. My goal is to have a copyright line displayed at the bottom of the screen, however, it requires scrolling all the way ...

html

The ::before pseudo-element is not functioning properly with the <i> tag

I'm attempting to add a ::before pseudo selector to an i element styled with fontawesome. However, when I target the icon through its parent, the ::before css overlaps with the Icon (or makes the icon disappear). This issue arises only if there is a ...

htmlcss

Is there a better approach to accomplishing this task using jQuery?

http://jsfiddle.net/bGDME/ My goal is to display only the selected content within the scope and hide the rest. The method I used feels a bit cumbersome. I'm open to suggestions on how to improve this. Any guidance would be greatly appreciated. Tha ...

javascriptjqueryhtml

Show a PDF document on the webpage by making an ajax request in a C# MVC application

Using ItextSharp, I am creating a Pdf from html and trying to show a preview of the Pdf on the screen for the user to interact with. Although the Pdf generation is correct, I am struggling to display it on the screen. Here is the Ajax call: function Pre ...

c#htmlajaxasp.net-mvcpdf

Is there a way to efficiently retrieve and handle multiple $_POST records in PHP simultaneously?

I am currently working on developing a management interface that allows administrators to make bulk edits to members of a website all at once. While we already have the capability for single edits, there is a need for an option to modify all users simultan ...

phphtmlarrayspost

Menu with a carousel feature in between each item

I am experiencing an issue with a carousel embedded within a menu using Twitter Bootstrap. <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="carousel slide" id="CarouselTest"> <div class="carousel-i ...

jquerycsstwitter-bootstrap

Learn how to dynamically change a class name with JavaScript to alter the color of a navbar icon

I have little experience with javascript, but I want to make a change to my navbar icon. Currently, my navbar has a black background with a white navbar icon. As I scroll the page, the navbar background changes to white and the font color changes to black. ...

javascripthtmlcssbootstrap-4navbar

Having trouble with my form validation for a university project. Not sure if it's a problem with the JavaScript or HTML

I had attempted to simplify things, but I'm at a loss as to what could be causing the issue. I'm uncertain if the return command is functioning properly or if the button is creating a problem, but I can't seem to pinpoint the exact issue. M ...

javascripthtml

How to create a scrolling fixed div that moves horizontally and repositions to the center when the page is maximized

I've been searching for a solution to my problem and have managed to figure out the first part, but there's still one issue that I could use some help with. While I have some knowledge of html, css, and basic php, I'm completely new to javas ...

jquerycss

Tips for generating a <div> element with multiple children using a loop

section, I have configured a div element with a class named div class = "postWindow". When it comes to the HTML code, here is an example: <div class = "postWindow"> <div class = "userName">Initial Name</div> <div class = "p ...

javascriptjqueryhtmljsonajax

"Ensuring a mobile-friendly website menu's z-index is

I'm currently working on developing a responsive menu, but I've encountered some issues with setting the correct Z-index values. The problem arises when trying to add a "show menu" button that expands behind the main content (cwrap) after window ...

htmlcssresponsive-designz-indexconcrete5

Unable to interpret JSON data in D3visualization

While attempting to read a JSON file using the D3 library, I encountered an issue where I received an alert indicating null values. Here is the code snippet I am using: <!doctype html> <html lang="en"> <head> <meta charset="utf-8" ...

javascriptjqueryhtmljsond3.js

At what point does a dynamically loaded CSS file in the head section of a webpage actually

If the answer is already out there somewhere, I would really appreciate a link because I just can't seem to find it. When loading .php pages, I either include 'header.php' directly with <?php include 'header.php'; ?> or on ...

javascriptphpcss

Can the CSS property of a class be altered in real-time with jQuery?

I am working on a project where I have a predefined CSS style in one class. I am currently attempting to load that page as an IFRAME on another website. My goal is to modify the CSS property of that specific class from the loaded site using jQuery. Unfor ...

javascriptjqueryhtmlcss

Resize drop zone with drag and drop functionality

I am using jQuery for dragging and dropping elements, but I am facing an issue. When I resize the drop zone while starting to drag an item, it seems like the previous size of the drop zone is still being used as the space. Is there a way to fix this? ...

javascriptjqueryhtmlcssdrag-and-drop

Is there a way to verify if an element has a focused child element using JavaScript?

Currently, I am in the process of eliminating all jQuery from my codebase. In the past, I have been using the following snippet: if ($(selector).find(':focus').length === 0) { // focus is outside of my element } else { // focus is inside ...

javascriptjqueryhtmlfocus

Responsive height using Material Design Lite

I have a website using MDL, with a prominent header centered on the page. To enhance visibility, I added a background box behind the text. To view the CodePen example, click here. The challenge is to ensure that when the window is resized, such as on a m ...

htmlcssresponsive-designheightmaterial-design-lite

Having trouble with SVG background image not displaying properly and positioning correctly?

I need help fitting an svg as a background into an element that is 80% of the screen width. Here is the desired final result: https://i.sstatic.net/LhybR.png The svg effect only works correctly when I reduce the width, but then it breaks in two. I want ...

htmlcss

What is the best way to change a byte array into an image using JavaScript?

I need assistance converting a byte array to an image using Javascript for frontend display. I have saved an image into a MySQL database as a blob, and it was first converted to a byte array before storage. When retrieving all table values using a JSON ar ...

javascripthtmlangularjs

Add the file to the current directory

As a newer Angular developer, I am embarking on the task of creating a web page that enables users to upload files, with the intention of storing them in a specific folder within the working directory. The current location of the upload page component is ...

javascripthtmlangularuploadfile-handling