How can I specifically fix the position of an element along the y-axis using CSS?

In the div, which spans about 1150px and requires scrolling down to see all its contents, there are two anchors positioned fixed at the top. As you scroll down, the anchors remain visible at all times.

However, my issue arises when I shrink the browser window width. I want the second anchor to move below the first one as space runs out, but currently, they overlap because the wrapping only occurs once the browser window physically reaches the anchors.

Removing the position fixed allows the anchors to wrap below each other as the browser window size decreases. It seems that fixing the y-axis without fixing the x-axis may be the solution.

htmlcssgwt

Answer №1

The concept of the position attribute applies to the entire element. Essentially, what you are inquiring about is a new type of position attribute.

If you apply fixed positioning to an element that contains both of your anchors, and set your anchors to float, they will wrap around if necessary:

<style type="text/css">
  #fixed {
    position: fixed;
  }
  .left {
    float: left;
  }
  .right {
    float: right;
  }
</style>

...

<div id="fixed">
  <div class="left">Lorem ipsum dolor sit amet,</div><div class="right">consectetur adipiscing elit.</div>
</div>
<div id="content">
  <p>something here...</p>
</div>

Answer №2

There was a previous discussion on the topic of fixed-y / scrollable-x, and it was concluded that JavaScript is needed to achieve this functionality, as mentioned by others.

The suggested approach in the earlier conversation was to check periodically (e.g. every tenth of a second) if the elements need to be repositioned, and then move them accordingly.

Answer №3

It appears that there might be a similar question at this link.

To summarize, achieving this effect solely with CSS is not possible. JavaScript will be required. I suggest using jQuery.

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

Is it achievable to apply a shadow to a div using only CSS, or would images be required?

I am looking for a simple solution where the user can press something and see a shadow effect on a new div (div centered window) that appears on top of the entire page, maybe 1/4th in size. Can this be achieved using pure web-kit css? Or would a combinat ...

javascriptcsshtmlwebkit

"Enhance your HTML table by selecting and copying cell values with a simple click and CTRL +

I stumbled upon a fantastic script for highlighting HTML table rows and it's working perfectly: I decided to modify the onclick event to onmouseover and included additional code to select a cell by clicking on it. Now I can select, check which one is ...

javascripthtmlhtml-tablecell

Transforming HTML-encoded JSON into JSON format with BeautifulSoup

Seeking a solution with parsing raw HTML from the bandsintown website using beautifulSoup to access a JSON embedded in a script, particularly the "eventsJsonLd" key in the script section of the page source: "jsonLdContainer":{"eventsJsonLd":[{"@context":" ...

htmljsonparsingbeautifulsoup

Guide to modifying the desktop background image using @media

I'm facing an issue with background images on my website. They display fine on mobile, but desktop is proving to be a challenge when attempting to use an @media query for modification. Here's my current CSS: body.page-id-6166 { background-im ...

htmlcsswordpress

Incorporate the stylish PayPal icon from Font Awesome into the PayPal code

I'm experimenting with adding the font awesome paypal icon <i class="fa fa-paypal" ></i> before the PAY WITH PAYPAL text on my button. You can see a similar setup on this page with the shopping cart icon <i class="fa fa-shopping-cart"& ...

htmlpaypalfont-awesome

Search form divided upon window resize

After making some improvements with the help of others, my header is now more responsive than before. However, I have encountered 2 issues: The search form appears broken into two pieces One of the menu items' text spans multiple lines instead of sta ...

javascripthtmlreactjs

After closing the box, make sure to hold it securely

After clicking the button and closing my box with jQuery (Toggle), I want the state of the box to be remembered after refreshing the page. If the box was closed, it should remain closed upon refresh, and if it was open, it should stay open. I am looking ...

javascriptjqueryhtmlcss

Drop-down Sidebar Menu in Bootstrap 4

Could someone provide guidance on creating a Bootstrap 4 Sidebar Menu Dropdown similar to the one shown in the image below? https://i.sstatic.net/NZ8B8.jpg I am considering using Dropright buttons but have been unsuccessful in finding good examples of co ...

htmlcssdrop-down-menubootstrap-4

Ways to modify the hue of an li element in the context menu upon hovering

I'm currently working on a project that involves VueJS and Bootstrap. To enhance user experience, I've incorporated a context menu using the npm package called vue-context Vue Context Menu When a user hovers over an item on the context menu, the ...

javascripthtmlcsstwitter-bootstrapvue.js

Struggling with implementing CSS in React even after elevating specificity levels

I am struggling with a piece of code in my component that goes like this: return ( <div className="Home" id="Home"> <Customnav color="" height="80px" padding="5vh"/> <div className= ...

cssreactjsstyling

What steps can I take to properly position my child element within its parent container?

Is there a way to adjust the width of a child element so it fits snugly inside its parent div? The width should be contained within the padding area. The top and left placement is correct, but the right side needs adjustment. Check out this link for refe ...

htmlcss

finding the source file or code where a particular html element is being generated

In the HTML file I have, there are multiple JavaScript files added. Whenever I run the HTML file, a title tag is automatically created in my HTML file. I do not want this title tag to appear in my HTML file. How can I prevent this from happening? Or how c ...

javascripthtmlcss

Change Dropdown menu orientation to vertical

Struggling to convert a CSS drop down menu into a vertical menu. I've tried multiple solutions but can't seem to achieve the desired result. Here is my CSS and HTML code, can anyone point out what I might be missing? #sddmT { margin: 0; pa ...

cssmenu

Transform a <ul> into an <ol> format (replacing bullets with numbers)

This question presents a challenge, but there may be a solution waiting to be uncovered. Presently, I am utilizing the Kendo UI panelbar for developing expandable lists. However, an issue surfaces when employing an <ol> as the sublist - in this scen ...

jqueryhtmlcsskendo-uikendo-panelbar

The Issue of Missing HTML Registration Form Data in Django

My configurations in demo\urls.py, user\urls.py, views.py, and HTML form seem to be set up correctly. However, upon pressing the submit button on the HTML form, I encounter a "File Not Found" error. Even after seeking assistance from ChatGPT, fol ...

htmldjangoformsdjango-rest-frameworkdjango-views

Choosing a file path in JavaScript

Can JavaScript be used to choose a directory? I'm not looking to upload a file, just wanting to select a directory path. (Directory dialog or something similar) ...

javascripthtml

Save a CSS class within the browser

One feature of my project is the ability to change the site theme with a simple click: <ul> <li class="=contact"><a href="#">Contact</a></li> <li class="facebook"><a href="#">Facebook</a></li> &l ...

javascriptjqueryhtmlcss

How to create a looping animation effect for a div using CSS on hover

Using Bootstrap framework with Wordpress site .test { position: absolute; z-index: 9; left: 50%; height: 10em; width: 10em; margin-left: -5em; background-size: cover; opacity: 0; transition: opacity 0.5s ease; transform: translateY(- ...

javascriptjqueryhtmlcss

Add a new row to the table when a dropdown option is selected, and remove the row when deleted. Ensure that the row is only added

Here is my specific requirement: I need a table with a default row containing a dropdown menu in the first column. When an option is selected from the dropdown, a new table row should be added with the same content as the main row and a delete button for ...

javascriptjqueryhtmlcss

Improving access for disabled individuals in HTML through tab-index usage

Hey there, I'm currently dealing with some challenges regarding tab-index for disabled elements. It seems that we are unable to focus on the elements, as screen reader tools are not announcing them and are skipping over them directly. For example: I ...

htmlangularaccessibilitywai-aria