How to have an action button float above the user page

[ChrisjChrisj]

Currently, in the php web script, the “Get All Selected” button is hidden until a selection is made on the page. Once it is displayed it appears at the top of the page, but when a user scrolls down the page to peruse other selections, the button is out of site.

How can that button float to always stay in the users view, to select (once it displays) anytime?

<button class="btn btn-main" style="background:#00000" data-action="multiple-b-video" onclick="PT_MultipleBVideo();">GetAll Selected</button>

I look forward to any guidance with this.

[bwclovis]

Position fixed… but that’s going to cause some aceesibility issues.

[ChrisjChrisj]

Thanks for your reply.
Can you please elaborate on “going to cause some aceesibility issues”?

[PaulOB]

@ChrisjChrisj

Can you please elaborate on “going to cause some aceesibility issues”

If the button is fixed in place then it will not move/scroll and may obscure important content. You would need to decide where to place it very carefully. Of course without seeing how your page works now we can’t really offer much more detail

[ChrisjChrisj]

Thanks for the reply.

I am testing this:

     <style>
	 .float{
	position:fixed;
	 width:100px;
	 height:30px;
	 margin-top:30px;
	 right:80px;
	padding:4px 2px;
	 background:#000000;
	 color:#FFF;
	 border-radius: 8px;
	text-align:center;
	   }
     </style>

<button class="float" data-action="multiple-b-video" onclick="PT_MultipleBVideo();">GetAll Selected</button>

And it floats (or stays fixed, whichever you want to call it) down the page when scrolling down the page. The page, however, has thumbnail images on it and buttons below each thumbnail, the issue is that the float button goes behind the thumbnail images and the buttons. Shouldn’t it appear on top of the content?

Any additional guidance is appreciated.

[Ray.H]

@ChrisjChrisj

the issue is that the float fixed button goes behind the thumbnail images and the buttons. Shouldn’t it appear on top of the content?

Sounds like you have positioning applied to them too. Is position:relative applied to the the images, buttons, or their container?

Positioned elements lower in the page source auto stack on top of positioned elements higher up in the page.

Give your fixed button a z-index and it should work, or better yet remove any unnecessary positioning and it should resolve itself.

@PaulOB

Of course without seeing how your page works now we can’t really offer much more detail

ditto

[PaulOB]

@ChrisjChrisj

margin-top:30px;

Be careful when omitting the top property as the position of the fixed element is now determined by its natural position in the flow of the document and then at that point it becomes fixed. If for example you have the button appearing near the bottom of the screen then there’s a chance that on smaller screens the fixed element will be hidden below the fold and may be unreachable.

Generally you would want to set the top (or bottom) co-ordinates of a fixed element to ensure it always appears in the viewport. e.g. top:30px.

Sometimes of course it may be fine to omit the top (or bottom co-ordinates) but then you have to rely on its natural position in the flow which may change if more or less content is added.

@ChrisjChrisj

And it floats (or stays fixed, whichever you want to call it)

Why not call it by its right name which is a fixed positioned element . In CSS a float is something completely different and calling it a float will only confuse. As an aside you should never really name elements by how they appear because that will also lead to confusion should you decide to place the element somewhere else at a later date. Use class names that will work no matter where the element appears or what colour or size it is.

e.g. A button could have a class called 'call-to-action" which makes sense if the button is floated, fixed positioned, black or blue. It would be silly to call an element a float and then not float it